useMemo, useCallback

useMemo

useMemo는
리액트에서 컴포넌트의 성능을 최적화하는 데 사용되는 훅이다. memo는 memoization을 뜻하는데, 이는 그대로
해석하면 '메모리에 넣기'라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을
메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

 

 

즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에

저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것.

 

리액트에서 함수형 컴포넌트는 렌더링 ➡️ 컴포넌트 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다.

 

function Component() {
  let value = calculate();
  return <div>{value}</div>;
}

function calculate() {
  return 10;
}

 

컴포넌트가 렌더링 될 때마다 value라는 변수가 초기화된다.

 

즉, 렌더링 될 때마다 calculate 함수가 불필요하게 재호출 된다는 것인데

만약 이 함수가 무겁고 복잡한 함수라면 매우 비효율적일 것이다.

 

useMemo 훅을 사용하면?

 

렌더링 ➡️ 컴포넌트 함수 호출 ➡️ memoize 된 함수를 재사용하는 순서를 거친다.

 

이는 calculate 함수를 반복적으로 실행할 필요가 없어 효율적이다.

---

useMemo의 구조

 

const value = useMemo(() => {
  return calculate();
}, [DependancyArray]);

 

useMemo는 useEffect와 마찬가지로 첫 번째 인자로 콜백 함수, 두 번째 인자로 의존성 배열을 받는다.

 

의존성 배열의 값이 업데이트될 때에만 콜백 함수를 다시 호출하여 메모리에 저장된 값을 업데이트한다.

 

만약 빈 배열을 넣는다면 useEffect와 마찬가지로 마운트 될 때에만 값을 계산하고 그 이후로 계속 memoization 된 값을 꺼내와 사용한다.

---

useCallback

 

useCallback은
특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 메모이제이션된 함수를 반환하는 함수이다.

 

왜 useCallback을 사용해야 할까?

 

현재 하위 컴포넌트에 전달하는 콜백 함수가 inline 함수로 사용되거나,

컴포넌트 내에서 함수를 생성하고 있다면 새로운 함수가 만들어지게 된다.

 

함수를 재 선언 하는 것은 CPU, 큰 메모리를 차지하지 않지만,

한번 만든 함수를 재 사용하고, 필요할 때만 재 생성하는 것은 중요하다.

 

사실 useCallback은 useMemo와 거의 동일하다.

useMemo는 값을 재사용하고 useCallback은 함수 자체를 재사용한다.