React - useMemo(), useCallback()

useMemo()

복잡한 계산 결과를 기억(memoization) 해서, 불필요한 계산을 피하고 성능을 향상시키는 Hook

Memoization (메모이제이션)
- 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 -> 성능 최적화
- 메모이제이션 된 결과값이 Memoized value

계산량이 많은 작업(compute함수)의 경우 컴포넌트가 랜더링될 때마다 수행하면 UI 지연 발생
-> useMemo() 훅이 필요

렌더링이 일어나는 동안 실행되서는 안되는 작업은 useMemo()에 사용하면 안됨
- useEffect()에서 실행돼야 할 이펙트 작업임.

1. 의존성 배열을 넣지 않으면?

const result = useMemo(() => {
  console.log("계산됨");
  return computeSomething();
});

 

의존성 배열이 없으면, 매 렌더링마다 실행됨
useMemo의 의미가 없어짐 = 그냥 const result = computeSomething(); 과 똑같이 됨

2. 의존성 배열이 빈 배열일 경우 ([])

const result = useMemo(() => {
  console.log("처음 한 번만 계산됨");
  return computeSomething();
}, []);

 

컴포넌트가 처음 렌더링될 때만 실행되고
이후에는 재계산 안 함 (값을 메모리에 기억함)

3. 의존성 배열에 값이 있을 경우

const result = useMemo(() => {
  console.log("data가 바뀔 때만 계산됨");
  return computeSomething(data);
}, [data]);

 

data가 바뀔 때만 재계산됨
data가 같다면 재렌더링 돼도 computeSomething()은 실행 안 됨

---

useCallback()

useMemo() Hook과 유사하지만 값이 아닌 함수를 반환