useMemo와 useCallback

 

 

 

React에서 useMemo와 useCallback은 성능 최적화를 위해 사용되는 훅(Hooks)이다

둘 다 계산 비용이 많이 드는 연산의 결과를 재사용함으로써 불필요한 연산을 방지할 수 있도록 도와준다

그러나 사용 목적과 적용 방식에서 차이가 있다

 

useMemo

useMemo는 메모이제이션된 값을 반환하는 훅이다

즉, 복잡한 함수의 연산 결과값을 "기억"하고, 의존성 배열(dependency array)에 있는 값들이 변경되지 않았다면 이전 연산 결과를 재사용한다

이를 통해 불필요한 연산을 방지하고 성능을 최적화할 수 있다

 

import React, { useMemo } from 'react';

function expensiveCalculation(num) {
  console.log('Calculating...');
  // 복잡한 계산을 수행하는 함수
  return num * 2; // 예시를 단순화함
}

function MyComponent({ number }) {
  const result = useMemo(() => expensiveCalculation(number), [number]);
  
  return <div>{result}</div>;
}

 

위 예시에서 expensiveCalculation 함수의 결과는 number 값이 변경될 때만 다시 계산된다

 

useCallback

useCallback은 메모이제이션된 콜백 함수를 반환한다

주로, 컴포넌트가 렌더링될 때마다 동일한 함수를 다시 생성하지 않기 위해 사용된다

useCallback은 특히 자식 컴포넌트에 props로 함수를 전달할 때 유용하며,

의존성 배열에 있는 값들이 변경되지 않는 한 이전 함수를 재사용한다

사용 예시:

import React, { useCallback } from 'react';

function MyComponent({ number }) {
  const memoizedCallback = useCallback(() => {
    console.log('Number: ', number);
    // 의존성 배열의 값에 의존하는 어떤 작업 수행
  }, [number]);
  
  return <div onClick={memoizedCallback}>Click me</div>;
}

위 예시에서 memoizedCallback 함수는 number 값이 변경될 때만 다시 생성된다

 

차이점

• 목적:
  • useMemo는 연산된 값을 재사용하기 위한 것이고, useCallback은 특정 함수 자체를 재사용하기 위한 것
• 반환값:
  • useMemo는 메모이제이션된 값을 반환하고, useCallback은 메모이제이션된 함수를 반환한다

 

두 훅 모두 컴포넌트의 렌더링 성능을 최적화하는 데 사용될 수 있으나,

실제로는 필요한 경우에만 사용해야 한다

메모이제이션은 리소스를 추가로 사용하기 때문에,

성능 문제가 명확히 있을 때나 렌더링 최적화가 반드시 필요한 경우에 적용하는 것이 좋다