이 글을 쓰게 된 이유
- 렌더링 최적화에 대해 알아보던 중 Hook을 사용하여 '값'과 '함수'만을 메모제이션 시킬 수 있는게 아닌
컴포넌트 자체도 메모제이션을 시킬 수 있다는 것을 알게 되어 공부하게 되었다.
React.Memo란?
앞에서 다뤘듯이 React 특성 상 어떠한 조건으로 인하여 리렌더 시 모든 컴포넌트들이 리렌더 되는 특성이 있는데,
그러한 낭비적인 요소들을 효율적으로 다루기 위하여 컴포넌트 자체에도 Memoization을 하여 효율적인 렌더를 할 수 있다.
React.Memo 사용법
const MyComponent = React.memo(function MyComponent(props) { /* props를 사용하여 렌더링 */ });
React.Memo를 쓰는 상황
- 컴포넌트가 같은 props로 자주 렌더링 되거나, 무겁고 비용이 큰 연산이 있는 경우
React.Memo를 쓰지 말아야 하는 상황
- 컴포넌트가 무겁지 않고 자주 다른 props로 렌더링 되는 경우
useMemo와 React.Memo의 차이점
- React.memo는 리액트의 HOC(Higher Order Component) 패턴, useMemo는 리액트 Hooks의 함수
- React.memo는 HOC이기 때문에 클래스형, 함수형 컴포넌트 모두 사용 가능
- But, useMemo는 Hook이기 때문에 함수형 컴포넌트에서만 사용 가능
하잇