[React] useMemo / useCallback

Seungmin Lee·2022년 9월 28일

React 프론트엔드

React

목록 보기

7/9

Memoization(메모이제이션)
동일한 값을 리턴하는 함수를 반복적으로 호출해야하는 경우, 맨 처음 값, 혹은 함수를 메모리에 저장해두고 다음에 필요할 때는 메모리에서 꺼내 재사용하는 기법

`useMemo`와 `useCallback`의 목적

렌더링 → 컴포넌트(함수형) 호출 → 컴포넌트 내부 모든 변수 초기화

function Component(){
  const value = calc();
  return <div>{value}</div>
}

위와 같은 컴포넌트가 있다면, 렌더링이 될 때 마다 컴포넌트가 호출되고 내부의 변수는 초기화되므로 calc가 매번 호출 된다. 만약 이 calc 함수가 복잡한 연산을 하는 함수일 경우, 렌더링될 때 마다 호출될 것이고 앱의 속도는 느려지게 될 것이다. 이 때, useMemo와 useCallback을 사용해 최적화할 수 있다.

하지만 메모이제이션에 따른 메모리를 사용하기 때문에 남용할 경우 오히려 성능이 떨어질 수 있으므로 꼭 필요한 경우만 쓰는 것이 좋다.

`useMemo`

👉 인자로 받는 콜백 함수가 리턴하는 값을 메모이제이션

렌더링 → 컴포넌트(함수형) 호출 & Memoization → 렌더링 → 컴포넌트(함수형) 호출 & Memozie된 값을 재사용

import { useMemo } from 'react'

function Component(){
  const value = useMemo( () => calc(), []);
  return <div>{value}</div>
}

useMemo를 사용하면 처음 컴포넌트 호출시 계산된 값을 메모리에 저장해두고, 컴포넌트가 반복적으로 호출되어도 calc를 호출하지 않고 메모리에 저장된 값을 가져와 사용한다.

첫번째 인자로 콜백 함수를 받고, 이 콜백 함수는 메모이제이션 할 값을 리턴해주는 함수이다.
두번째 인자로 의존성 배열(dependency array)을 받는다.
변수에 할당하는 값이 참조자료형일 경우 유용하다.

`useCallback`

👉 인자로 받는 콜백 함수 자체를 메모이제이션

렌더링 → 컴포넌트(함수형) 호출 → Memozie된 함수를 재사용

import { useCallback } from 'react'

function Component(){
  const calc = useCallback( () => {
    return value;
  }, [item]);
  return <div>{value}</div>
}