React Memo

React memo? 그게뭐임??

말그대로 memorize. 기억하게 해주는기능!! 뭐를? 예를들어 설명하는게 제일편햐~

function Btn({ text, onClick }) {
      console.log(text, "was Rendered");
      return (
        <button
          onClick={onClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: 18,
          }}
        >
          {text}
        </button>
      );
    }

    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text={value} onClick={changeValue} />
          <Btn text="Continue~" />
        </div>
      );
    }

App()코드를 보게되면, div안에 button이 2개 들어가져있는데, 컴포넌트 props중 onClick에 해당하는 부분을 eventListener 로 연결해둠. 위에 버튼을 누르게 되면 밑에있는 버튼까지 render(렌더링)되어서 불필요한 업데이트를 만들 수 가 있음. 윗 버튼을 클릭했을때 Revert Changes was Rendered < 라고 출력이 되면서, Continue~ was Rendered <라고 출력된걸 확인할 수 있쬬? ㅎ

그럼 이제 우리가 react한테 말하는거지. 두번째 btn컴포넌트의 prop은 변경이 안되었으닌까 렌더링하지마라. 짱나닌까 ㅡㅡ 이러케.

const MemorizedBtn = React.memo(Btn);
 function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <MemorizedBtn text={value} onClick={changeValue} />
          <MemorizedBtn text="Continue~" />
        </div>
      );
    }

그걸위해서. 부모 함수인App() 밖에다가 MemorizedBtn이란 변수를 만들어주고. 그 변수에 React.memo를 준 다음, Btn을 인자로 넣어줌. Btn을 MemorizedBtn으로 바꿔주기만 하면됨. 버튼을 눌렀을때, state(상태)에 변경이 생긴 prop의 컴포넌트만 console.log에 찍혀나오는게 확인된다.

React.memo를 사용하기 전에 부모의 App()이 실행된경우 자식요소(div안에 모든 컴포넌트)가 re-render된다. 이는 브라우저나 앱 의 속도를 느리게 하는 주요 원인이 될 수 있다. 지금이야 2개지만, 하나의 부모 컴포넌트가 1000개의 컴포넌트를 가지고 있다 생각하면 끔찍함 ㅎ

무튼 결론은 React.memo는 props의 상태변경이 일어날 때 그 해당 컴포넌트만 rendering을 하게끔 돕는 기능을 가진 함수란거지.