2월 12일 여정 35일차 이다.

1. 컴포넌트에서 state가 바뀌었을 때
2. 컴포넌트가 내려받은 props가 변경되었을 때
3. 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두

위의 조건은 리액트에서 리렌더링이 일어나는 조건이다.
그중에 오늘 3번 조건을 해결하기 위한 Hook을 볼 예정이다.

오늘의 Today I Learned

리액트에서 부모컴포넌트 리랜더링은 곧 자식 컴포넌트의 리랜더링과 같다.

아래의 코드를 보자.

const boxesStyle = {
  display: "flex",
  marginTop: "10px",
};

function App() {
  console.log("App 컴포넌트가 렌더링되었습니다!");

  const [count, setCount] = useState(0);

  // 1을 증가시키는 함수
  const onPlusButtonClickHandler = () => {
    setCount(count + 1);
  };

  // 1을 감소시키는 함수
  const onMinusButtonClickHandler = () => {
    setCount(count - 1);
  };

  return (
    <>
      <h3>카운트 예제입니다!</h3>
      <p>현재 카운트 : {count}</p>
      <button onClick={onPlusButtonClickHandler}>+</button>
      <button onClick={onMinusButtonClickHandler}>-</button>
      <div style={boxesStyle}>
        <Box1 />
        <Box2 />
        <Box3 />
      </div>
    </>
  );
}

export default App;

버튼을 누르면 숫자를 증가시키는 코드이다.
밑에는 자식 컴포넌트인 Box들이 있다.
여기서 App.jsx의 버튼을 눌러 실행시키면 자식 컴포넌트인 Box들도 리렌더링이 되는 것을 볼 수 있다.

그러면 이런 불필요한 자식컴포넌트의 리랜더링을 막기 위해서 어떻게 하면 될까?
방법은 의외로 간단하다.

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);

이렇게 자식 컴포넌트에 React.memo를 감싸주면 된다.
어떻게 이걸 감싸줬다고 리랜더링이 안일어나는 것일까?

React.memo()는 컴포넌트를 메모리에 저장해두고 필요할 때 갖다쓰게 된다. 저런식으로 자식 컴포넌트를 감싸게 되면, 부모 컴포넌트의 state의 변경으로 인해 props 변경이 일어나지 않는 한 컴포넌트는 리렌더링이 일어나지 않는다. 이것을 컴포넌트 memoization이라고 한다.

마지막으로

이전에 보았던 useCallback은 함수를 캐싱하지만, React.memo는 컴포넌트를 캐싱한다.