리액트 렌더링에 대한 퀴즈쇼. 자식 재렌더가 안 일어나게 하려면?(useCallback, React.memo)

🧞‍♂️ 혹여 틀린 부분이 있다면 댓글로 알려주시면 감사드리겠습니다.

 

퀴즈. 부모가 재렌더되면 자식들은 재렌더될까 안 될까?

기본적으로 재렌더 된다. 재렌더를 막기 위해 'useCallback' 혹은 'React.memo'를 쓰게 되는 것이다.

부모가 자식한테 prop을 아무것도 안 내려주고 있고 자식은 그저 부모에게 마운트만 되어있다고 치자.

부모의 state들은 사실 자식에게 하등 상관없지만 부모의 state가 바뀌어 재렌더되면 자식도 재렌더된다.

 

컴포넌트 재렌더를 막기위한 대표수단 React.memo

이걸 막기 위해 쓰는 것이 React.memo이다. 리액트 컴포넌트를 메모이제이션해놓는 방법 중 하나이다.

쉽게 말해 캐싱해두고 변하지 않게 하는 방법이다.

아래 예시는 이전에 설명한 것처럼 아무런 prop도 받지 않는 자식컴포넌트의 예시이다. 

React.memo로 ChildComponent의 재렌더를 방지한다. 전역에 포스트잇 메모해놓는 듯이.

// React.Memo
const ChildComponent = React.memo(() => {
  console.log('ChildComponent rendered');
  return <div>I am the child component.</div>;
});

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* 사실 아무런 prop도 받고 있지 않다. */}
      <ChildComponent />
    </div>
  );
};

 

 

React.memo를 해놓아도 재렌더가 일어나는 순간: 받는 Prop이 바뀜

// count라는 prop을 받는다.
const ChildComponent = React.memo(({ count }) => {
  console.log('ChildComponent rendered');
  return <div>I am the child component.</div>;
});

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* 사실 아무런 prop도 받고 있지 않다. */}
      <ChildComponent count={count} />
    </div>
  );
};

 

위 예시에서 이제 자식 컴포넌트는 count를 받는다.

그리고 부모 return부를 보면 버튼을 눌러 count라는 state를 계속 증가시킬 수 있다.

이 버튼을 연타한다면 어떻게 될까? 아무리 React.Memo를 해뒀어도 자식 컴포넌트는 재렌더 되게 된다.

 

사실 자식 컴포넌트는 count를 받아서 실제 활용하지도 않고 렌더하지도 않았다.

그런데도? 그렇다. props에 변동이 생기면 props를 받은 컴포넌트는 재렌더되게 된다.

심지어 props를 받아 활용하지 않고 바로 하위 컴포넌트에게 바로 쏴주는 wrapper 컴포넌트라도 예외없다.

받은 props가 변경되면 재렌더 된다.

 

 

그렇다면 부모가 자식에게 state를 props로 주고있고 이 state는 변동이 없다.
그런데 부모의 다른 state가 변경되었다. 자식은 재렌더되나?

말이 좀 헷갈릴 수 있다. 예시를 들어보겠다. 부모는 stateA와 stateB를 가지고 있다. 자식에게 stateA를 내려줬다.

그런데 부모단에서 stateB를 조작해서 부모는 재렌더가 계속 일어난다. 이때 자식이 받고있는 stateA는 변함 없다고 할때,

재렌더 되는가?

 

답은... 자식을 React.memo로 안 감쌌다면 두 말할 필요없이 재렌더 된다ㅎㅎ (함정)

그러나 React.memo를 썼다면 재렌더가 일어나지 않는다.

 

이때 알아둬야할게, 재렌더가 일어날 때 그 컴포넌트 내의 함수, 핸들러 등은 모두 재렌더되지만

state들은 (직접적인 set함수를 통한 변경이 없다면) 유지된다. (이미 직관적으로 많이 체험해봐서 아는 부분일 것이다.)

 

즉, 자식이 받고 있는 props가 안 바뀌면서 제대로 React.memo가 되어있는 컴포넌트라면 재렌더가 일어나지 않는다.

 

 

그렇다면 부모가 자식에게 '원시형 데이터'를 props로 주고있고
이 데이터는 변동이 없다. 그런데 부모의 다른 state가 변경되었다.
재렌더되나? (자식은 React.memo로 감싸줌)

const ChildComponent = React.memo(({ a }) => {
  console.log('ChildComponent rendered');
  return <div>I am the child component.</div>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  
  const a = 100;

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* 쿨하게 number 자료형인 a를 받고 있다. */}
      <ChildComponent a={a} />
    </div>
  );
};

재렌더 안 된다. 어떤 사람들은 의아할 것이다.

재렌더 될 때 state로 만들어지지 않은 데이터는 모두 새로 재생성되는게 아니냐고 생각할 수 있다.

그 말이 맞다. 원시형 데이터는 부모가 재렌더 될때마다 맨날 재생성될 것이다.

 

그러나 React.memo는 얕은 비교를 수행한다.

원시형 값들은 사실 얕은 비교든 깊은 비교든 상관없이 '값'이 같다면

동일한 걸로 취급된다는 것을 기억해야된다.

그러므로 원시형 데이터가 계속 부모 내에서 재생성되더라도 데이터 변경이 없는 것으로 취급된다.

이는 class형 컴포넌트의 shouldComponentUpdate와 원리가 비슷하다.

(React.memo가 함수형 컴포넌트의 shouldComponentUpdate 메소드의 구현체라고 보면 된다.)

 

 

그렇다면 부모가 자식에게 handler를 prop로 주고있고
handler를 직접적으로 변경하지 않았지만 부모의 다른 state가 변경되었다.
이때 자식은 재렌더 되나? (자식은 React.memo로 감싸줌)

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <div onClick={onClick}>I am the child component.</div>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* handleClick을 내려받고 있다. */}
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

위처럼 handler를 useCallback으로 고정해두지 않았다면 재렌더 된다.

즉 useCallback으로 handler의 재생성을 막아뒀다면 재렌더가 일어나지 않는다.

 

직전에 말했듯이, React.memo는 얕은 비교를 한다.

얕은 비교에서 참조형 데이터를 다룰 때,

실제 내부의 값들이 동일한지를 비교하는게 아니라

참조 주소가 똑같은지를 비교하게 된다.

 

그렇다는 것은 함수, 객체, 배열 (이 모든게 사실 다 객체지만..) 등도

부모 재렌더 시 다시 생성되며, 주소값이 달라지게 된다.

그러므로, React.memo가 얕은 비교를 할 때 같은 값이 아니라고 판단하기 때문에

핸들러 같은 것을 내려줄 때 useCallback을 써야하는 것이다.

 

useCallback도 메모이제이션(쉽게 말해 캐싱)을 하는 훅 중 하나이며,

콜백함수가 재생성되는 것을 막고 같은 참조를 유지시켜준다.

의존성 배열에 들어가 있는 데이터가 변경됐을 시에만 callback을 재생성 해준다.

 

 

마지막 문제,
부모가 자식에게 useCallback을 써서 재생성을 막은 handler를 내려준다.
재렌더가 될 것인가? (자식에게 React.memo가 둘러져 있지 않다)

답은 재렌더 된다. React.memo가 없다면

기본적으로 모든 자식, 하위 컴포넌트는 재렌더가 된다는걸 전제로 생각하고 있어야한다.

물론 useCallback을 써서 핸들러의 참조가 변하지 않게 하고 유지시켰고

이를 통해 성공적으로 자식 컴포넌트가 받은 prop이 변경되지 않게 할 수 있다.

 

그러나 React.memo로 감싸지 않은 자식이라면 재렌더가 일어날 수 밖에 없다.

기본적으로 모든 자식 컴포넌트는 부모 컴포넌트가 재렌더될 때 재렌더 된다.

 

즉, useCallback을 썼다고 끝이 아니다.

참조를 유지시키는 이유는 React.memo가 얕은 비교를 잘 하게 하기 위해서란걸 까먹으면 안 된다.

즉, React.memo를 안 쓰면 무용지물이다.

(React.memo을 위해서가 아니더라도 useCallback을 써야하는 순간이 그렇게 많지 않다.)

 

나중에 공부할 것

- 얕은 복사와 깊은 복사 한 번 딥하게 정리

- class 컴포넌트의 shouldComponentUpdate

- useMemo

- 리액트 불변성

 

끝마치며

chatGPT의 할루시네이션 때문에 약간 헛소리를 많이 쓰는 바람에 교차검증하느라 작성 시간이 오래걸렸다.

useCallback과 React.memo를 끝장나게 알아보는 시간이 되어 성장에 좋은 자양분이 된 것 같다.