📚 Reference

• 공식 문서 1

📜 Chapter

useCallback

useMemo

list & key

최적화: 최적화 - React

memo

• memo
• memo를 사용하면 컴포넌트의 Props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다.

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

• 고차 컴포넌트(Higher-Order Component, HOC)로, 컴포넌트의 불필요한 리렌더링(re-rendering)을 방지하여 성능을 최적화하는 데 사용된다.
• 아이템 컴포넌트를 memo로 감싸면, 부모가 리렌더링되어도 내 데이터(props)가 변하지 않았다면 React는 그 아이템을 다시 계산하지 않고 이전 결과를 재사용한다.

작동 방식

• React.memo는 컴포넌트의 props가 변경되지 않았을 때, 이전 렌더링 결과를 재사용하도록 한다.

1. 컴포넌트를 래핑: React.memo로 컴포넌트를 감싸서 새로운 컴포넌트를 만든다.
2. props 비교: 부모 컴포넌트가 리렌더링될 때, React.memo는 래핑된 컴포넌트로 전달되는 props가 변경되었는지를 얕은 비교(shallow comparison) 방식으로 확인한다.
3. 결과 재사용
   • props가 동일한 경우: 이전 렌더링 결과를 그대로 재사용하고, 컴포넌트 내부 코드는 다시 실행되지 않는다.
   • props가 다른 경우: 컴포넌트를 다시 렌더링한다.

useMemo, React.memo - 차이점