useMemo, useCallback

useMemo, useCallback 사용 전 알아야 하는 것

• 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출해서 실행하는 것을 말한다.
  함수가 실행될 때마다 내부에 선언되어있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.
• 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때 마다 리렌더링 된다.
• ⭐메모이제이션을 잘 사용한다면 불필요한 렌더링을 줄일 수 있지만 무분별하게 사용한다면 오히려 성능이 떨어질 수 있다. 메모리의 어딘가에 저장을 해두어야하기 때문이다.

useMemo

useMemo는 메모이제이션된 값을 반환한다
useMemo는 이전의 값을 기억해두었다가 조건에 따라 재활용을 해서 성능을 최적화 하는 용도로 사용한다.

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

useCallback

메모이제이션된 함수를 반환한다.

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

React.memo

React.memo는 고차 컴포넌트이다.
고차 컴포넌트는 어떤 컴포넌트를 받아서 새로운 컴포넌트(최적화된 컴포넌트)를 반환해주는 함수이다.
렌더링이 될 때마다 prop check를해서 자신이 받는 props에 변화가 있는지 없는지 확인한다.
props에 변화가 있으면 렌더링하고 없으면 기존에 렌더링된 내용을 재사용한다.

React.memo의 memo는 memoization을 의미한다.
memoization은 이미 계산해놓은 값을 메모리에 저장해두고 재사용하는 기법이다.

React.memo는 오직 Props의 변화에만 의존하기 때문에 useState같은 hook을 사용할 때 state가 변할 때마다 다시 렌더링이 일어난다는 것을 잊지 말아야 한다.

React.memo를 사용하기에 적합한 상황

1. 컴포넌트가 같은 Props로 자주 렌더링 될 때
2. 컴포넌트가 렌더링될 때마다 복잡한 로직을 처리해야할 때

공통점 및 차이점

1. 공통점
   React.memo, useMemo, useCallback 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 목적이 있다.

2. 차이점

• React.memo는 HOC(고차 컴포넌트)이고, useMemo와 useCallback은 hook이다.
• React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능하다.
• useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다.

useMemo(()=>fn,[deps]) === useCallback(fn,[deps])

참고

역할 및 차이점
별코딩 유튜브