React - React.Memo

import React, { useState } from "react";

const ChildComponent = () => {
  console.log("ChildComponent is rendering!");
  return (
    <React.Fragment>
      <div>Children Component;</div>
    </React.Fragment>
  );
};

const ParentComponent = () => {
  console.log("ParentComponent is rendering!");
  const [toggle, setToggle] = useState(false);
  return (
    <React.Fragment>
      <ChildComponent />
      <button
        onClick={() => {
          setToggle(!toggle);
        }}
      >
        re-render
      </button>
    </React.Fragment>
  );
};

const Container = () => {
  return (
    <React.Fragment>
      <ParentComponent />
    </React.Fragment>
  );
};

function App() {
  return (
    <React.Fragment>
      <Container />
    </React.Fragment>
  );
}

export default App;

re-render 버튼을 누르게 되면 해당 ParentComponent의 State가 변화하여
ParentComponent와ChildComponent 둘 다 리랜더링이 일어나게 된다.
그러면서 당연하게도 각 Parent/ChildComponent의 console.log코드가 실행하게 된다.

하지만ParentComponent의 State값만을 변화했기에 자식 컴포넌트까지 리렌더링을 원치 않는
경우인데 이 때 랜더링 최적화를 하기 위해 React.memo를 사용하면 된다.

코드는 다음과 같다.

import React, { useState } from "react";

const ChildComponent = React.memo(() => {
  console.log("ChildComponent is rendering!");
  return (
    <React.Fragment>
      <div>Children Component;</div>
    </React.Fragment>
  );
});

const ParentComponent = () => {
  console.log("ParentComponent is rendering!");
  const [toggle, setToggle] = useState(false);
  return (
    <React.Fragment>
      <ChildComponent />
      <button
        onClick={() => {
          setToggle(!toggle);
        }}
      >
        re-render
      </button>
    </React.Fragment>
  );
};

const Container = () => {
  return (
    <React.Fragment>
      <ParentComponent />
    </React.Fragment>
  );
};

function App() {
  return (
    <React.Fragment>
      <Container />
    </React.Fragment>
  );
}

export default App;

직접 코드를 복사해 콘솔을 확인하길 바란다.
이렇게 Memoization을 활용해 랜더링 최적화를 이끌어 낼 수 있다.