memoreferential-equality

React memoization이 항상 좋은 선택은 아닌 이유를 설명해 주세요

예상 시간
7분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

React.memo는 무엇을 비교하나요?

부가 설명

const MemoizedChild = React.memo(Child);
 
function Parent({ items }) {
  return <MemoizedChild options={{ limit: 10 }} items={items} />;
}

options는 render마다 새 객체가 됩니다. React.memo는 기본적으로 얕은 비교를 하기 때문에 매번 다른 props로 판단할 수 있습니다.

const options = useMemo(() => ({ limit: 10 }), []);
return <MemoizedChild options={options} items={items} />;

이렇게 참조를 안정화해야 효과가 날 수 있습니다. 다만 이런 최적화가 실제로 필요한지 먼저 봐야 합니다.

memoization은 성능 문제를 해결하는 도구이지 기본 스타일은 아닙니다. 모든 값과 함수를 memoize하면 dependency 관리가 늘어나고, 오히려 버그 가능성이 커질 수 있습니다.

렌더링이 발생하는 것과 DOM이 실제로 바뀌는 것은 다릅니다. Re-render가 항상 나쁜 것은 아니고, React의 기본 모델은 다시 계산하되 필요한 commit만 하는 쪽입니다.

한 줄 정리

React memoization은 렌더링 병목이 확인된 곳에 선택적으로 쓰는 최적화 도구이지, 모든 component에 붙이는 기본값은 아닙니다.