React useMemo 개념 및 사용 방법

React useMemo 개념 및 사용 방법

리스트를 렌더링 할 때 정렬해서 보여주고 싶을 때가 있다.

아래와 같이 리스트를 렌더링 하면 리스트가 오름차순으로 정렬되어 렌더링 될 것이다.

const TestList = (props) => {
  const { items } = props;

  const sortedList = () => {
    console.log('Items sorted');
    return items.sort((a, b) => a - b);
  }; 
  console.log('TestList RUNNING');

  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        {sortedList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default React.memo(TestList);

하지만 때로는 컴포넌트에 이런 로직이 성능에 있어서 민감할 수 있다.

이렇게 리스트가 짧다면 정렬 역시 빠르지만 리스트가 길다면, 아니면 다른 작업을 하는 중이라면 분명 소요 시간이 더 길어질 것이다.

이런 코드 실행되어야 하지만 전체 컴포넌트가 재평가될 때마다 이런 코드를 실행하고 싶지는 않을 것이다.

useMemo는 기본적으로 useCallback이 함수에 대한 것을 저장하듯 모든 종류의 데이터를 저장할 수 있다.

const TestList = (props) => {
  const { items } = props;

  const sortedList = useMemo(() => {
    console.log('Items sorted');
    return items.sort((a, b) => a - b);
  }, [items]); 
  console.log('TestList RUNNING');

  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        {sortedList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default React.memo(TestList);

useMemo의 첫 번째 인자에는 함수가 들어가야 하며 함수를 기억하게 하는 건 아니고 이 함수가 저장하고 싶은 것을 반환할 것이다.

이 경우에서는 정렬된 배열을 반환한다.

useCallback과 마찬가지로, useMemo도 의존성 배열이 필요하고 이 의존성 배열을 통해 저장된 값에

변경 사항이 생길 때마다 업데이트 된다.

함수를 기억하는 것이 훨씬 더 도움이 되고 데이터를 기억할 일보다 빈도수가 더 많기 때문에 useMemo는 useCallback에 비해 사용 빈도는 낮다.

useMemo를 사용해 데이터를 저장하면 이는 메모리를 사용하는 것이고 이런 함수 저장 또한 일정 성능을 사용하기 때문에 useMemo를 사용하는 모든 값마다 사용하는 것이 아니다.