React & Next.js

React 성능 최적화를 위한 useMemo와 useCallback의 사용법과 차이점

0

React는 사용자 인터페이스를 구축하는 데 널리 사용되는 라이브러리로, 컴포넌트 기반 아키텍처를 제공합니다. 하지만, 큰 규모의 애플리케이션에서는 성능 최적화가 중요합니다. 특히, 불필요한 렌더링을 방지하고 계산 비용이 많이 드는 작업을 효율적으로 관리하는 것이 중요합니다. 이때 React의 `useMemo`와 `useCallback` 훅이 유용하게 사용됩니다. 이번 기사에서는 이 두 훅의 사용법과 차이점에 대해 자세히 알아보겠습니다.

useMemo: 값 메모이제이션

`useMemo`는 계산량이 많은 함수의 결과값을 메모이제이션하는 데 사용됩니다. 이는 특정 값이 변경될 때만 재계산을 수행하고, 그렇지 않으면 이전 값을 재사용하여 불필요한 계산을 방지합니다.

import React, { useMemo } from 'react';

function ExpensiveComponent({ a, b }) {
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
  }, [a, b]);

  return <div>{expensiveValue}</div>;
}

function computeExpensiveValue(a, b) {
  // 복잡한 계산 로직
  return a + b; // 예시로 단순화한 계산
}

위 코드에서 `computeExpensiveValue` 함수는 `a`나 `b`가 변경될 때만 다시 실행되며, 그렇지 않으면 이전에 계산된 값을 재사용합니다. 이를 통해 성능을 최적화할 수 있습니다.

useCallback: 함수 메모이제이션

`useCallback`은 함수 인스턴스를 메모이제이션합니다. 이는 주로 자식 컴포넌트에 함수를 props로 전달할 때 유용하며, 불필요한 재렌더링을 방지할 수 있습니다.

import React, { useCallback } from 'react';

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

  return <ChildComponent onClick={memoizedCallback} />;
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

function doSomething(a, b) {
  console.log(a, b);
}

위 코드에서 `doSomething` 함수는 `a`나 `b`가 변경될 때만 새로 생성되며, 그렇지 않으면 이전에 생성된 함수를 재사용합니다. 이를 통해 불필요한 자식 컴포넌트의 재렌더링을 방지할 수 있습니다.

useMemo와 useCallback의 차이점

  • 사용 목적: `useMemo`는 값을 계산하여 메모이제이션하는 데 사용되고, `useCallback`은 함수 인스턴스를 메모이제이션하는 데 사용됩니다.
  • 반환 값: `useMemo`는 메모이제이션된 값을 반환하고, `useCallback`은 메모이제이션된 함수를 반환합니다.

언제 사용해야 할까?

두 훅 모두 성능 최적화를 위해 사용되지만, 무분별한 사용은 오히려 성능을 저하시킬 수 있습니다. 따라서, 다음과 같은 상황에서 사용하는 것이 좋습니다.

  • useMemo: 계산 비용이 많이 드는 작업이 반복적으로 수행될 때.
  • useCallback: 동일한 함수가 반복적으로 생성되어 자식 컴포넌트가 불필요하게 재렌더링될 때.

주의사항

메모이제이션을 사용할 때는 의존성 배열을 정확하게 관리해야 합니다. 잘못된 의존성 배열은 예상치 못한 버그를 초래할 수 있습니다. 또한, 메모이제이션된 값이나 함수가 너무 많이 쌓이면 메모리 사용량이 증가할 수 있으므로, 실제 성능 문제를 확인한 후 적절하게 사용하는 것이 좋습니다.

결론

React의 `useMemo`와 `useCallback` 훅은 성능 최적화에 중요한 도구입니다. 각각의 훅은 값과 함수의 메모이제이션을 통해 불필요한 렌더링과 계산을 줄여줍니다. 하지만, 이를 효과적으로 사용하기 위해서는 정확한 의존성 배열 관리와 적절한 사용 시기를 파악하는 것이 중요합니다. 성능 최적화를 위한 도구들을 적절히 활용하여 효율적인 React 애플리케이션을 구축해보세요.

Leave a Reply