memo·useMemo·useCallback은 무엇을 각각 재사용하나요?

이렇게 답해 보세요 (핵심 답변)

React.memo는 컴포넌트를 감싸 부모가 재렌더될 때 전달된 props가 이전과 같으면 자식 컴포넌트의 재렌더를 건너뛰게 돕고, useMemo는 함수의 '계산 결과값'을, useCallback은 '함수 참조 자체'를 의존성 배열 기준으로 재사용합니다. 예를 들어 무거운 배열 필터링 결과를 캐시할 때는 useMemo를 쓰고, memo로 감싼 자식에게 내려주는 콜백이나 Effect 의존성에 들어가는 함수 참조를 안정화할 때는 useCallback을 씁니다. 다만 memo로 감싼 컴포넌트라도 자기 자신의 state나 구독 중인 Context가 바뀌면 다시 렌더링됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. useCallback으로 함수 참조를 고정하는 것은 그 함수를 받는 자식이 React.memo로 최적화되어 있거나 의존성 배열에서 참조 비교를 할 때 의미가 있습니다.
2. 의존성 배열에서 실제로 읽는 반응형 값을 누락하면 오래된 상태를 참조하는 스냅샷 버그가 생기므로 의존성 규칙을 정확히 지켜야 합니다.

면접에서 자주 하는 실수

useCallback이 함수의 실행 결과값을 캐시해 준다거나, 컴포넌트에 memo를 붙이면 어떤 경우에도 절대 다시 렌더링되지 않는다고 오해해서는 안 됩니다.