useMemo

앞의 두개의 포스팅에서 메모이제이션을 통해 리액트 어플리케이션을 최적화 하는 방법에 대해서 알아봤다.

이번에도 같은 내용이다.

useMemo는 함수의 실행의 결과를 메모이제이션 하는데 사용한다.

즉, 연산이 오래 걸리는 값을 메모이제이션을 통해 재사용한다.

import React, { useState } from 'react';

import './App.css';

function App() {
  const [number, setNumber] = useState(0);
  const [sourceNumber, setSourcedNumber] = useState(0);

  const calculate = (number) => {
    return number * number;
  };

  const calculatedNumber = calculate(number, sourceNumber);

  return (
    <div className="app">
      <input
        type="number"
        placeholder="Number"
        onChange={(event) => setNumber(Number(event.target.value))}
      ></input>
      <input
        type="number"
        placeholder="SourceNumber"
        onChange={(event) => setSourcedNumber(Number(event.target.value))}
      ></input>
      <h2>Calculated Number: {calculatedNumber}</h2>
    </div>
  );
}

export default App;

위 코드는 number와 sourceNumber의 calculate 연산을 통한 결과 calculatedNumber를 확인하는것을 목표로 둔 코드이다.

그리고 calculate 함수가 엄청난 오랜 시간을 소요하는 연산이라고 가정하자, 그랬을때 calculatedNumber는 다른 요인에 의해 App 컴포넌트가 리렌더링 될때마다 해당 연산을 수행할 것이다.

그렇기에 다른 요인에 의해 다시 연산을 실행하는 것을 방지하기 위해 useMemo 훅을 사용할 수 있다.

const calculatedNumber = useMemo(calculate(number, sourceNumber), [
    number,
    sourceNumber,
  ]);

위 코드처럼 useMemo로 연산을 감싸주고, 의존성 배열에 인자를 넣어 calculatedNumber가 변경이 필요한 때를 설정한다.

위 코드의 경우 number,sourceNumber의 상태가 변경되지 않는이상, 즉, 다른 상태의 변경으로 컴포넌트가 리렌더링될 경우 연산을 다시 실행하는 것을 방지하고 메모리에 저장된 값을 가져와 사용함으로 성능 최적화를 가져온다.

위 예제가 useMemo의 효과를 확인하기에 적절한 예제가 아니지만, calculatedNumber가 다른 요인, 즉 다른 상태 변경으로 App 컴포넌트가 리렌더링 될 경우라고 가정하고 생각해주길 바란다.