React | useMemo 사용법, 사용목적, 예시

useMemo 사용 목적

useMemo는 React에서 제공하는 훅(Hook) 중 하나로, 주로 두 가지 목적으로 사용된다.

1. 계산 비용이 높은 연산의 결과를 저장하고 재사용하기 위해 - 만약 컴포넌트가 계산 비용이 많이 드는 연산을 수행하고, 그 결과를 여러 번 재사용해야 한다면 useMemo를 사용하여 해당 결과를 저장하고 필요할 때 재사용할 수 있다.
2. 참조 동일성(Reference Equality)을 유지하기 위해 - React에서 객체나 배열과 같은 복잡한 데이터 타입을 props로 넘길 때, 이 데이터가 매번 새로 생성되면 자식 컴포넌트가 불필요하게 재렌더링될 수 있다. useMemo를 사용하여 이러한 객체나 배열을 저장하면, 컴포넌트의 리렌더링이 발생해도 동일한 참조의 데이터를 유지할 수 있다.

 

 

useMemo 사용법 예시 코드

import React, { useState, useMemo } from 'react';

function ExpensiveComponent() {
  const [count, setCount] = useState(0);

  // 계산 비용이 높은 함수
  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2; // 복잡한 계산을 가정
  };

  // useMemo를 사용하여 expensiveCalculation의 결과를 저장
  const calculatedValue = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Calculated Value: {calculatedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default ExpensiveComponent;

이 코드에서는 useState를 사용하여 count 상태를 관리하고 있다. expensiveCalculation 함수는 계산 비용이 높은 연산을 수행하는 것으로 가정하며, 이 함수의 결과는 useMemo를 사용하여 저장된다. useMemo의 첫 번째 인자는 실행할 함수이고, 두 번째 인자는 의존성 배열이다. 이 배열의 값이 변경될 때만 함수가 다시 실행된다. 이 예시에서는 count가 변경될 때마다 expensiveCalculation 함수가 다시 실행되어 결과가 갱신된다.

이와 같이 useMemo를 사용하면 컴포넌트의 리렌더링이 발생해도 계산 비용이 높은 함수의 결과를 재사용할 수 있어 성능 최적화에 도움이 된다.

 

 

빈 의존성 배열 사용 : 초기 마운트 시

useMemo에서 빈 의존성 배열([])을 사용하면, 이 메모이제이션된 값은 컴포넌트의 마운트 단계에서만 계산되고 생성된다. 즉, 컴포넌트가 처음 렌더링될 때 한 번만 실행되며, 그 후에는 저장된 값을 재사용하게 된다. 이는 컴포넌트가 업데이트되어도 useMemo 내부의 함수가 다시 실행되지 않음을 의미한다.

import React, { useState, useMemo } from 'react';

function ExpensiveComputationComponent() {
  const [count, setCount] = useState(0);

  // 계산 비용이 높은 함수
  const computeExpensiveValue = (value) => {
    console.log('Computing expensive value...');
    return value * 2; // 복잡한 계산을 가정
  };

  // useMemo를 사용하여 계산 결과를 저장
  // 빈 의존성 배열([])을 제공하여 컴포넌트가 마운트될 때만 계산
  const expensiveValue = useMemo(() => computeExpensiveValue(count), []);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

export default ExpensiveComputationComponent;