whatisthis?

React. React Js - Memo 본문

WEB STUDY/REACT

React. React Js - Memo

thisisyjin 2022. 2. 18. 10:50
 

React. React Js - props

props를 사용하는 방법 props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식. (부모->자식) 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 props 객체가 들어가게 됨

mywebproject.tistory.com

지난 포스팅인 props의 예제를 이어서 진행함.

 

 

지난시간에 했던 것을 복습해보자.

 

Btn 컴포넌트를 설정하는 App 컴포넌트에서

 return (
        <div>
          <Btn text= "Save Changes" />
          <Btn text="Continue" />
        </div>
      );

위와 같이 text라는 property를 주고,

(text 대신 banana라고 이름 붙여도 ok. 이름은 상관 X)

 

 

function Btn({text}) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }

Btn 컴포넌트에서 props라는 파라미터(=객체임)

의 text를 받아와서 버튼의 inner텍스트로 사용하는 것을 했었다.

 

function Btn(props) / {props.text}는
function Btn({text}) / {text}와 같다.

이번 시간에는 onclick시 버튼의 텍스트가 바뀌는 기능을 구현해보자.

 

 

 

function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => {
        setValue("Revert Changes");
      };

 

우선, useState를 사용하여 버튼 클릭시 setValue함수가 실행되고, 

value의 값이 바뀌도록 한다.

 

 

return (
        <div>
          <Btn changeValue={changeValue} text={value} />
          <Btn text="Continue" />
        </div>
      );

첫번째 버튼은

기본 텍스트는 {value}의 초기값, 즉 "Save Changes"이고

setValue 함수가 실행되도록 하는 changeValue함수로 인해 "Revert Changes"로 변하게 된다.

 

 

여기서, changeValue = {changeValue}를 살펴보면

 {}안에 들어간  changeValue는 위에서 선언한 함수를 의미하고,

= 연산자 전에 있는  changeValue 는 prop으로 사용할 이름이다.

 

 

❗❗❗

단, 위와 같이 작성한 것은 

Btn에 직접 한것이 아니고 App컴포넌트에 한 것이라서

이벤트리스너를 붙인게 아닌, 컴포넌트에  changeValue 라는 프롭을 전달한 것 뿐이다.

 

 

따라서, Btn 컴포넌트의 파라미터에  changeValue 를 추가하고,

return부분에 직접

onclick = { changeValue } 를 해줘야

onclick시 changeValue 함수가 실행된다.

 

 function Btn({ text, changeValue }) {
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }

 

 

 

전체 코드 🔻

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, changeValue }) {
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }

    const MemorizedBtn = React.memo(Btn);

    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => {
        setValue("Revert Changes");
      };

      return (
        <div>
          <Btn changeValue={changeValue} text={value} />
          <Btn text="Continue" />
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

 

 

 

 

실행 결과 (바뀐 텍스트)

 

 

 

📌 React.memo()

 

 

위 코드를 보면 우리는 첫번째 Btn만 변경했는데,

useState에 의해 다시한번 컴포넌트가 재실행되면서,

Continue 버튼은 변경되지 않았음에도 다시한번 리렌더링 된다.

 

>> 이는 비효율적일 수 있음.

 

이럴때는 react의 memo를 사용하자.

const MemorizedBtn = React.memo(Btn);

 

React.memo(컴포넌트명)을 해주면

리액트가 memorize해놨다가, 변경된 부분만 리렌더링 하게 된다.

 

 

 

 

 

 

 

Ref. 

 

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React Fundamentals

nomadcoders.co

 

'WEB STUDY > REACT' 카테고리의 다른 글

React. create-react-app 셋업  (0) 2022.02.18
React. React Js - PropTypes  (0) 2022.02.18
React. React Js - props  (0) 2022.02.16
React. React JS - Unit Converter (기능추가+a)  (0) 2022.02.16
React. React Js - State Functions (current의 이용)  (0) 2022.02.15
'WEB STUDY/REACT' Related Articles more