React.memo() - 질문

React.memo()

• 컴포넌트가 React.memo()로 wrapping 되면, React는 컴포넌트를 렌더링하고 결과를 메모라이징(Memoizing)한다.
  그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

• 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하는 기능

1. memo() 안쓴 코드

• 이렇게 하면 콜솔창에 save,continue,Revert, continue 이렇게 나옴

• 부모 컴포넌트인 App의 state가 변경될 때마다, App 아래있는 자식 컴포넌트는 전체 리렌더됨.
  <- 질문?(왜 prop이 안바꼈는데도 전체가 리렌더링 되는지?, 강의 앞부분에서는 리액트를 바뀐 부분만 리렌더링 한다고 했는데?)

  function App() {
        const [value, setValue] = React.useState("save");
        const setFn = () => setValue("Revert");
        return (
          <>
            <Btn title={value} onClick={setFn} color="tomato" />
            <Btn title="continue" />
          </>
        );
      }

      function Btn({ title, onClick, color }) {
        console.log(title);
        return (
          <>
            <button style={{ color }} onClick={onClick}>
              {title}
            </button>
          </>
        );
      }

2. memo() 사용코드

• 부모 컴포넌트인 App의 state가 변경될 때마다, App 아래있는 자식 컴포넌트는 전체 리렌더됨.

• 이때 불필요한 리렌더는 React.memo()로 관리할 수 있음. prop의 변경이 일어난 부분만 렌더링 시킬 수 있음.

• 이렇게 하면 콜솔창에 save,continue,Revert 이렇게 나옴

 const MemorizedBtn = React.memo(Btn);

      function App() {
        const [value, setValue] = React.useState("save");
        const setFn = () => setValue("Revert");
        return (
          <>
            <MemorizedBtn title={value} onClick={setFn} color="tomato" />
            <MemorizedBtn title="continue" />
          </>
        );
      }

      function Btn({ title, onClick, color }) {
        console.log(title);
        return (
          <>
            <button style={{ color }} onClick={onClick}>
              {title}
            </button>
          </>
        );
      }

※참조
https://ui.toast.com/weekly-pick/ko_20190731
https://react.vlpt.us/basic/19-React.memo.html