useMemo ?

Mintaek·2023년 10월 4일

React hooks useMemo

React

목록 보기

10/12

useMemo

useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여 렌더링 성능을 최적화하는 데 사용된다. 이 Hook을 사용하면 동일한 입력 값에 대해 동일한 결과를 반환하는 함수나 계산을 최적화할 수 있다.

형태

const cachedValue = useMemo(calculateValue, dependencies)

특징

메모이제이션

메모이제이션이란?

: 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

useMemo를 사용하여 함수 또는 계산 결과를 메모이제이션한다. 메모이제이션된 결과는 동일한 입력 값이 주어질 때 재계산되지 않고 캐시된 값을 반환한다.

의존성 배열

useMemo는 두 번째 인자로 의존성 배열(dependency array)을 받는다. 의존성 배열에 포함된 값들이 변경될 때만 함수 또는 계산이 다시 실행된다.

예제

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

function Test({ a, b }) {
  // a와 b를 입력으로 받아서 계산 결과를 메모이제이션
  const result = useMemo(() => {
    console.log('계산 중...');
    return a * b;
  }, [a, b]);

  return (
    <div>
      <p>계산 결과: {result}</p>
    </div>
  );
}

function App() {
  const [a, setA] = useState(2);
  const [b, setB] = useState(3);

  return (
    <div>
      <button onClick={() => setA(a + 1)}>A 증가</button>
      <button onClick={() => setB(b + 1)}>B 증가</button>
      <Test a={a} b={b} />
    </div>
  );
}