리액트 - useCallback, useMemo

리액트 공식문서와 다른 참고자료를 읽고 정리해본 글 입니다.

useMemo와 useCallback을 배우기 전에 알아야 하는 것

1. 함수형 컴포넌트는 그냥 함수다. 다시 한 번 강조하자면 함수형 컴포넌트는 단지 jsx를 반환하는 함수이다.

2. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.

3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. (심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 되는게 기본이다. )
   출처 - 이화랑님 블로그

useCallback

리액트 공식문서를 살펴보면

const memoizedCallback = useCallback(
  () => {
	dosomrthing(a,b);
  },
  [a,b],
 );

메모이제이션된 콜백을 반환합니다. 첫번째 인자로는 콜백함수, 두번째 인자로는 의존성 값의 배열을 전달하고 반환값은 콜백의 메모이제이션된 버전을 반환한다.

그럼 여기서 메모이제이션이란?

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

UseMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a,b), [a,b]);
 );
  

메모제이션된 값을 반환합니다.
첫번째 인자로는 생성함수, 두번째로는 그것의 의존성 값의 배열을 전달합니다.
useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값을 다시 계산합니다.

useMemo로 전달된 함수는 렌더링 중에 실행된다는 것을 기억하세요. 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하지 마세요. 예를 들어, 사이드 이펙트(side effects)는 useEffect에서 하는 일이지 useMemo에서 하는 일이 아닙니다.

배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 될 것입니다.