※ 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 처리해서 자식 컴포넌트가 재호출되더라도 무겁지않게 재호출하기 위함
'IT > React' 카테고리의 다른 글
[React] useReducer 정리 (0) | 2023.07.11 |
---|---|
[React] useContext 정리 (0) | 2023.07.11 |
[React] FramerMotion 정리 (0) | 2023.07.10 |
[React] img onError 속성 정리 (0) | 2023.07.10 |
[React] useHistory 정리 (0) | 2023.07.06 |