[React] memoization 정리

※ memoization 메모이제이션

    - 특정 값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐)
    - Memoization을 많이 할수록 메모리점유율을 강제로 늘려서 속도를 증가
    - 자바스크립트 엔진은 garbage collection (안쓰는 메모리를 정기적으로 제거해서 메모리 최적화)
    - Memoization된 요소는 garbage collection에서 제외 됨
    - 부모 컴포넌트가 재호출되면 자식 컴포넌트는 변경되는 내용이 없음에도 불구하고 무조건 재호출 

      (불필요한 함수 호출 발생)
    - 자식 컴포넌트가 memo로 Memoization 되었어도 prop 값이 전달되면 Memoization이 풀림
    - prop을 받기만 하고 사용하지 않아도 Memoization이 풀림
    - 자식 요소에 props 전달되지 않는 값이 부모 컴포넌트에서 변경 되면 그때는 자식 컴포넌트의 Memoization이 유지됨 

 

EX) 자식 컴포넌트에서 사용

import { memo } from 'react';
export default memo(자식 컴포넌트 명);

 

memo 

- 특정 컴포넌트 자체를 memoization해서 부모 컴포넌트가 Rerandering 되더라도 자식 컴포넌트를 매번 ReRandering하는 것이 아닌 이전 Randering된 결과값을 재활용 (불필요한 Rerandering 방지)
hoc(high order component) : 함수 인수로 함수를 전달해서 새로운 함수를 반환하는 형태

- 만약 prop로 참조형 자료가 전달되면 부모에서 해당 값을 변경하지 않더라도 부모 컴포넌트가 ReRandering되면 자식 컴포넌트의 Memoization이 풀리면서 재호출 발생

EX) 

const colors = ['red', 'green', 'blue'];
<Child Counter={Counter} colors={colors} />

- 위와 같은 현상 발생 이유 : 참조형 자료는 메모리에 해당 값 자체가 할당되는 것이 아닌 참조 링크가 할당되기 때문에 부모 컴포넌트가 재호출 일어나면 참조링크가 계속 변경되고 자식 컴포넌트 입장에서는 매번 다른 값이 전달되므로 Memoization을 해제
- 해결방법 : lodash의 isEqual을 이용해서 참조링크가 아닌 참조되는 원본 데이터 값을 비교해서 해결
- 함수(참조형자료)가 props로 전달되면 부모컴포넌트해서 해당 함수가 변경되는게 아님에도 불구하고 자식 컴포넌트는 Memoization 안됨 (isEqual 처리 불가)
- 아래와 같은 경우에는 useCallback을 사용하여 방지 할 수 있다.

EX) 부모 컴포넌트.js

const updateCounter = () => setCounter(Counter + 1);
<Child Counter={Counter} colors={colors} updateCounter={updateCounter} />

※ 참조형 자료 때문에 Memoization 되는 것을 막아주는 라이브러리 (lodash)
설치 : npm i lodash

 

EX) 자식 컴포넌트.js

import { isEqual } from 'lodash';
export default memo(Child , isEqual);

 

 

※ useCallback

- 부모 컴포넌트 단에서 props전달되는 함수 자체를 Memoization 처리
- useCallback 사용 시 함수를 통채로 Memoization하기 때문에 함수 내부에서 특정 State 값을 변경 한다면 해당 State를 의존성배열에 등록
- 해당 State가 변경 될 때만 임시로 Memoization을 풀어주도록 설정 

사용법) 

useCallback(Memoization할 함수 , 의존성 배열)
const updateCounter = useCallback(() => setCounter(Counter + 1),[Counter]);

 

 

※ useMemo

- 특정 함수의 리턴 값 자체를 Memoization

 

사용법) 자식 컴포넌트.js

const heavyWork = useMemo(() => {
let num = 0;

for (let i = 0; i < 500000000; i++) {
num++;
}

return num;

 

 

※ useCallback / useMemo 차이

- useCallback : 
1. 자식으로 함수를 전달할 때 해당 함수를 Memoization처리해서 자식 컴포넌트의 재호출 자체를 막고 싶을 때
2. Props로 함수를 전달하지 않더라도 특정 컴포넌트가 재호출 될 떄마다 굳이 똑같은 함수를 매번 호출하지 않아야 될 때

- useMemo 자식 컴포넌트의 재호출이 불가피할 때 자식 컴포넌트에서 무겁게 연산되는 특정값을 Memoization 처리해서 자식 컴포넌트가 재호출되더라도 무겁지않게 재호출하기 위함