useMemo
계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.
- memoization된 값을 반환한다.
- 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화한다.
useCallback
- 렌더링 성능을 위해 사용한다.
- 자식 컴포넌트에 props로 새로 생성된 함수가 넘겨지면 불필요한 리렌더링이 일어날 수 있는데, useCallback 훅으로 감싸면 이를 방지할 수 있다.
React.memo()
- shouldComponentUpdate의 훅 버전이다.
- 리액트는 props를 통해 하위 컴포넌트에 데이터를 전달되고, 해당 값들이 변경될 때마다 재 렌더링되어 화면에 새롭게 표현되는게 리액트의 기본적인 개념이다.
React.memo()를 사용하면 컴포넌트 렌더링 시 결과를 memoizing 한다. 그 뒤, 다음 렌더링이 일어났을 때 해당 컴포넌트의 props가 같다면 memoizing된 내용을 재사용한다. - 이때 props로 전달된 객체에 대해 얕은 비교를 수행한다. (HOC)
- memoizing한 결과를 재사용함으로써, 리액트는 재 렌더링 시 가상 DOM에서 달라진 부분을 확인하지 않아 성능이 향상될 수 있다.
props가 자주 바뀌는 컴포넌트를 memoizing하면 불필요한 연산과 메모리를 낭비하게 된다. 따라서 같은 props로 렌더링이 자주 일어나는 컴포넌트에 사용하는 것이 적합한다.
https://ryulog.tistory.com/164
React Profiler
React Profiler를 사용하면 컴포넌트의 total render, duration등의 정보를 확인할 수 있다.
https://wiki.c2.com/?ProfileBeforeOptimizing
https://www.youtube.com/watch?v=00RoZflFE34
https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
정리
- React.memo는 HOC이고, useMemo 와 useCallback은 훅이다. React.memo는 HOC이기 때문에 클래스, 함수형 모두 사용 가능.
- useMemo는 함수의 연산량이 많을 때 이전 결과값을 재사용하는 목적이고,
- useCallback은 함수가 재생성되는 것을 방지하기 위한 목적이다.
- 이 셋 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 사용된다.
