React Hooks 5 - memoization

 

 

memoization

 

1. 리렌더링의 발생 조건

- state가 변경, props가 변경, 부모 컴포넌트가 리렌더링되는 경우

 

2. 최적화

memo(React.memo) : 컴포넌트를 캐싱

useCallback : 함수를 캐싱

useMemo : 값을 캐싱

 

 

1. memo 사용 방법

// 각각의 파일에서 export를 시킴

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);

 

이렇게 하는 경우 렌더링 되는 파일만 렌더링이되고 그 외 파일들은 리렌더링 되지 않음

 

 

 

2. useCallback 사용 방법

memo는 컴포넌트를 메모이제이션 했다면, useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션)

// 변경 전
const initCount = () => {
  setCount(0);
};

// 변경 후
const initCount = useCallback(() => {
  setCount(0);
}, []);

 

 

 

3. useMemo 사용 방법

맨 처음 값을 반환할 때 그 값을 메모리에 저장 > 필요할 때 마다 함수가 아닌 저장한 값을 꺼내서 사용 > 캐싱을 한다 라고 표현

 

// 변경 전
const value = 반환할_함수();

// 변경 후
const value = useMemo(()=> {
	return 반환할_함수()
}, [dependencyArray]);

 

 

주의 사항

어찌보면 사용할때 마다 별도의 메모리를 잡아먹게 되기 때문에 성능이 악화될 수 있음