- 메모이제이션이란
- 이전 값을 메모리에 저장하여, 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술
- 리액트의 useMemo, useCallback, React.memo 모두 Memoization 기반으로 동작한다.
- 고차컴포넌트
- 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo 는 이점이 있다.
- 아래와 같을 때 쓰자.
- 리렌더링이 되는 동안에도 계속 같은 props값이 전달 될 경우.
- props가 자주 변경 되는 경우는 오히려 독이 된다. 아래와 같은 연산이 추가 된다.
- 이전 props와 다음 props를 동등비교하기 위해 비교함수를 수행한다.
- 비교함수는 거의 false를 반환한다. REact는 이전 렌더링 내용과 다음 렌더링 내용을 비교한다.
- React.memo 로 감싸진 컴포넌트에 함수를 props로 주입할 때는 useCallback으로 감싸주자. 아니면 계속해서 새로운 함수가 주입되어서 새로운 props라고 인식 -> 리렌더링
- useMemo는 매번 렌더할 때 마다 메모리가 많이 소모 되는 값을 계산하지 않고 최적화 하도록 도와준다.
- 함수를 메모이제이션 한다.
- memo로 감싼 컴포넌트에 함수 Props를 넘겨줄 때 사용 가능