useMemo, useCallback, React.memo

useMemo와 useCallback는 컴포넌트 성능 최적화를 위해 사용되는 React의 대표적인 Hook이다.

두 가지 개념을 알아보기 전, 먼저 memoization을 알아보자.

memoization?

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

useMemo?

처음 계산된 결과 값을 메모리에 저장해서, 컴포넌트가 반복적으로 렌더링되어도 계산을 반복 수행하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와 재사용할 수 있도록(memoization) 하는 React Hook이다.

useMemo 구조

useMomo(() => { }, [value])

useMemo는 두 개의 매개변수를 받는다.

• 첫 번째 매개변수는 callback 함수가 들어간다.
  이 콜백 함수가 return 한 값을 memoization 한다.

• 두 번째 매개변수는 의존성 배열이 들어간다.
  배열 안의 요소 값이 업데이트 될 때에만 useMemo의 callback 함수를 호출해서 memoization된 값을 update하고 다시 memoization한다.
  만약, 빈배열[]을 넘겨주면 맨 처음 컴포넌트가 mount되었을 때만 값을 계산하고 이후에는 항상 memoization된 값을 꺼내와 사용한다.
  
  

useMemo 과정

일반 적인 함수 컴포넌트는 컴포넌트가 렌더링 될 때마다 내부 변수(value)가 계속 초기화 되어 calculate 함수를 반복 호출하게 된다.
만약 calculate 함수가 무거운 일을 하는 함수라면 굉장히 비효율적이다.
왜냐하면 calculate 함수는 무의미한 계산을 반복해서 value 변수에 같은 값을 사용하기 때문이다.

useMemo를 사용하여 calculate 값을 memoization 해주면 이런 상황을 간편히 해결할 수 있다. useMemo를 통해 처음 계산된 값을 메모리에 저장하여, 컴포넌트가 반복적으로 렌더링되어도 calculate를 계속 호출하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와 재사용(memoization)할 수 있게 해준다.

useCallback?

useCallback은 useMemo와 거의 똑같다.
다른 점은 useMemo는 첫 번째 매개변수로 전달한 callback 함수의 return 값을 memoization 하고, useCallback은 매개변수로 전달한 callback 함수 그 자체를 memoization한다.

useCallback 구조

useCallback(() => { }, [value])

• 첫 번째 매개변수는 memoization 해줄 callback 함수가 들어간다.
• 두 번째 매개변수에는 의존성 배열이 들어간다.
  (구조 역시 useMemo와 같다.)
  
  

useCallback 과정

React.memo?

React.memo는 고차 컴포넌트(Higher Order Component)입니다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다. -React 공식 문서

React.memo는 오직 props 변화에만 의존하는 최적화 방법이다.
즉, 이 함수를 통해 컴포넌트에서 렌더링이 필요한 상황에서만 리렌더링 하도록 설정 할 수 있다.

컴포넌트를 React.memo를 통해 prop check 후 props 변화가 감지되지 않으면 리렌더링을 건너뛰고, props 변화가 감지되면 리렌더링 한다.

이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있습니다. -React 공식 문서

useMemo, useCallback, React.memo 모두 성능 최적화를 위해 사용되지만 남용하면 오히려 성능에 무리가 갈 수도 있으니 꼭 필요할 때만 쓰자!

별코딩 유튜브
React 공식 문서 useMemo
React 공식 문서 useCallback
React 공식 문서 memo