React.memo는 무엇을 하며 언제 사용할 가치가 있나요?

Question

Accepted Answer

`React.memo`는 컴포넌트를 감싸서 **props가 이전 render와 얕게 동일(shallow-equal)할 때 re-render를 건너뛰도록** 합니다. 기본적으로 자식은 부모가 render될 때마다 re-render되지만, `memo`는 props가 실제로 변경되지 않았을 때 이를 차단합니다. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // `item` 또는 `onSelect` 참조가 변경될 때만 re-render return

onSelect(item.id)}>{item.name}

; }); ``` ## 함정: 안정적인 props가 필요하다 `memo`는 **얕은(shallow)** 비교를 합니다. 부모가 매 render마다 새 객체/배열/함수를 전달하면 비교는 항상 실패하고 `memo`는 아무것도 하지 못합니다: ```jsx function List({ items }) { // ❌ 매 render마다 NEW 함수 → Row의 onSelect prop이 항상 "변경됨" return items.map(i => pick(id)} />); } ``` `useCallback`으로 함수를 안정화하여 해결하세요: ```jsx const onSelect = useCallback(id => pick(id), []); // render 사이에 동일한 참조 return items.map(i => ); ``` ## 언제 가치가 있는가 - 컴포넌트가 **같은** props로 **자주** render되고 그 render가 사소하지 않을 때(큰 리스트, 비용이 큰 하위 트리). ## 언제 아닌가 - 대부분의 컴포넌트는 저렴합니다. 비교 자체에 비용이 들고, 모든 것을 감싸면 이득 없이 복잡성만 추가됩니다. React DevTools Profiler로 **먼저 프로파일링**한 다음, 입증된 핫스팟을 memoize하세요 — 맹목적으로 memoize하지 마세요.