useMemo

useMemo

useMemo훅은 React에서 값에 메모이제이션을 적용할 수 있는 훅이다.
두 개의 인자를 받으며 첫 번째는 메모이제이션을 적용할 값을 반환하는 함수이고, 두 번째는 의존성 배열이다. 의존성 배열 안의 값 중 하나라도 변경되면 메모이제이션된 값을 다시 계산하여 반환한다.

값을 메모이제이션함으로써 React 애플리케이션의 성능을 향상시킬 수 있다. 값은 의존성 배열 안의 값이 변경될 때만 다시 계산되며, 그 외의 경우에는 동일한 값의 인스턴스가 반환된다. 이는 의존성이 변경될 때만 비용이 많이 드는 게산을 다시 수행하고자 할 때 유용하다.

import React, { useMemo } from 'react';

function MyComponent({ data }) {
  const processedData = useMemo(() => {
    return data.map((item) => item.toUpperCase());
  }, [data]);

  return (
    <div>
      {processedData.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

Example

const slowFunction = () => {
  let value = 0;
  for (let i = 0; i <= 1000000000; i++) {
    value += i;
  }
  return value;
};

export default slowFunction;

이러한 오래걸리는 고정된 함수를 리렌더링 될때마다 하게되면 큰부하가 작용할 수 있다.

import { useCallback, useState } from 'react';
import { data } from '../../../../data';
import List from './List';
import slowFunction from './slowFunction';
const LowerState = () => {
  const [people, setPeople] = useState(data);
  const [count, setCount] = useState(0);

  const value = slowFunction();
  console.log(value);

  const removePerson = useCallback((id) => {
    const newPeople = people.filter((person) => person.id !== id);
    setPeople(newPeople);
  },[people]);

  return (
    <section>
      <button
        className='btn'
        onClick={() => setCount(count + 1)}
        style={{ marginBottom: '1rem' }}
      >
        count {count}
      </button>
      <List people={people} removePerson={removePerson}/>
    </section>
  );
};
export default LowerState;

console.log(value); 출력에 딜레이가 생긴다.

이와 같은 상황을 해결하기 위해서 useMemo훅을 사용한다.

const value = useMemo(() => slowFunction(), []);
console.log(value)

useMemo 훅은 메모이제이션된 값을 반환하기 때문에 만약 이전에 계산된 값이 이미 존재한다면 해당 값을 재사용한다. 그렇기 때문에 오래걸리는 계산식이라도 동일하다면 이전 계산을 반환하여 딜레이가 없게된다.