React.memo

React.memo란?
부모로 부터 전달받은 Props의 상태변경이 일어나지 않았을때 불필요한 렌더링을 방지하는 API
오직 Props 변화에만 의존하는 최적화 방법

 

React.memo 왜 사용해야할까?

React의 함수형 컴포넌트에서 상태가 변했을경우 컴포넌트는 리렌더링이 발생한다. 문제는 자식의 상태는 변경되는것이 없는 상황에서 부모컴포넌트의 상태가 변경됨으로써 자식은 불필요한 렌더링이 발생한다. 그렇기에 해당 자식이 부모에게 받는 props의 상태가 동일하다면 자식을 렌더링 하지 않도록 할수 있다.

 

React.memo 구문

• const ComponentName = memo(Component)
  • Component: 부모에게 Props를 받는 컴포넌트

React.memo 동작방식

• 부모에게 받는 Props가 변경되었다면 리렌더링이 발생하고, 그렇지 않다면 리렌더링이 발생하지않는다.

React.memo 사용법

- 기본적인 사용법

https://stackblitz.com/edit/stackblitz-starters-ivj1ij?file=src%2FApp.tsx

 

- React.memo & useMemo

https://stackblitz.com/edit/stackblitz-starters-kruoio?file=src%2FApp.tsx

 

- React.memo & useCallback

https://stackblitz.com/edit/stackblitz-starters-kjm18p?file=src%2FApp.tsx

 

React.memo 주의사항

- 최상위 레벨 호출: useEffect 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

- 호출의 위치: useEffect를 호출할때는 조건문이나 반복문안에서 hook을 호출할 수 없다.

- Props: 컴포넌트가 같은 Props로 자주 렌더링 될때사용

- 복잡한로직: 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야할때 사용

React.memo 참고문서

memo – React

16:10초부터