React.memo 얕은 비교 함정

부모가 리렌더링될 때 React.memo로 감싼 자식도 항상 리렌더링됩니다. 버그를 찾으세요:

JSX

const ChildComponent = React.memo(({ config }) => {
  console.log('자식 렌더링');
  return <div>{config.title}</div>;
});

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

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ChildComponent config={{ title: '제목' }} />
    </div>
  );
}

답변

console.log가 있으면 memo가 작동하지 않음 React.memo는 함수 컴포넌트에 사용할 수 없음 매 렌더링마다 새 객체 { title: '제목' }가 생성되어 얕은 비교에 실패함 useState의 함수형 업데이트가 memo를 무효화함

로그인 후 제출하기