React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가

원시값은 값으로 비교되지만 객체·배열·함수는 참조로 비교된다.

const a = { id: 1 };
const b = { id: 1 };
a === b; // false

매 렌더마다 새 객체/함수가 만들어지면 자식의 useEffect 의존성, React.memo 비교, useMemo 캐시가 모두 깨진다.

두 훅은 "렌더 간 참조를 보존"하는 캐시다. 차이: useCallback 은 함수 자체를, useMemo 는 함수의 반환값을 캐싱.

const Child = React.memo(({ data }) => /* ... */);
const Parent = (props) => <Child {...props} />;

Parent 의 호출자가 새 객체/함수를 매번 넘기면 Child 의 memo 가 즉시 깨진다. 메모이제이션 안정성은 호출 측까지 책임이 있는 셈.

const Memo = React.memo(({ children }) => /* ... */);
const Parent = () => (
  <Memo><div>Some content</div></Memo>
);

JSX 의 children 은 매 렌더마다 새 React element. 해결책: useMemo 로 element 자체를 안정화하거나, 컴포지션을 바꿔 memo 가 children 을 받지 않도록 설계.

const Inner = React.memo(() => <div>Inner</div>);
const Outer = React.memo(({ children }) => <div>{children}</div>);
const Parent = () => (
  <Outer><Inner/></Outer>
);

Inner, Outer 둘 다 memo 라도 Parent 가 매번 새 <Inner/> element 를 만들기 때문에 Outer 의 children prop 이 바뀐다. "내부도 memo면 안전"이라는 직관과 반대.

memo 가 필요해지는 상황 자체가 "상태가 너무 위에 있다"는 신호일 수 있다. 카운터를 CounterButton 같은 작은 컨테이너로 분리하면, 자주 바뀌는 상태가 ExpensiveComponent 의 부모를 더 이상 리렌더하지 않는다.

[감점 답변] "props 가 같으면 안 렌더한다"만 답. [좋은 답변] (1) 비교는 얕은 참조 비교이며, (2) 객체/함수/JSX element 는 매 렌더 새 참조라서 부모에서 안정화하지 않으면 무력화된다. (3) 추가로 children 도 prop 이라 영향을 받는다. (4) 사실상 "같은 입력일 때만 효과"라는 조건부 도구.

[감점 답변] "콜백 만들 때 항상 쓴다". [좋은 답변] 써야 할 때: (1) React.memo 로 감싼 자식에 콜백을 내릴 때, (2) useEffect 의존성에 들어갈 때, (3) 동일 참조가 의미 있는 외부 라이브러리 인자. 쓰지 말아야 할 때: 자식이 memo 가 아니거나, 의존성에 안 들어가는데 "습관적으로" 감쌀 때 — 오히려 메모이제이션 비용이 추가된다.

[감점 답변] "memo 부터 적용한다". [좋은 답변] (1) 컴포지션으로 상태 격리: 자주 바뀌는 상태를 더 작은 컴포넌트로 끌어내려 무거운 형제가 다시 렌더되지 않게. (2) 렌더 트리 분할: 비싼 트리를 children prop 으로 받기. (3) 상태를 위로 올리지 말기(필요한 경우에만 lift). (4) 이래도 안 되면 그제서야 memo + useCallback/useMemo.