React - useMemo

❶ useMemo란?

'useMemo'는 함수의 결과를 메모(또는 캐싱)하여 React 구성 요소의 성능을 최적화하는 데 사용되는 React hook입니다.

❷ useMemo를 사용하는 이유

구성 요소의 종속성이 변경되지 않은 경우 불필요한 재계산 또는 재렌더링을 방지하는 데 도움이 되기 때문에 사용합니다.

❸ 사용 방법

useMemo는 두 가지 인수를 허용합니다.

1. 함수: 메모된 값을 계산하기 위해 실행할 함수입니다.
2. 종속성 배열: 메모된 값이 의존하는 변수 또는 속성입니다. 이러한 종속성이 변경되면 메모된 값이 다시 계산됩니다.

hook는 메모된 값을 반환하며, 이 값은 구성 요소에서 사용할 수 있습니다.

다음은 useMemo를 사용하는 방법의 예시입니다.

import React, { useMemo } from 'react';

function MyComponent({ value, list }) {
  const filteredList = useMemo(() => {
    return list.filter(item => item > value);
  }, [value, list]);

  return (
    <div>
      <p>Filtered List:</p>
      <ul>
        {filteredList.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

이 예시에서 useMemo 는 value 또는 list가 변경될 때만 filteredList 를 계산하는 데 사용됩니다.
이는 불필요한 재계산 및 재렌더링을 방지하여 구성 요소의 성능을 향상시키는 데 도움이 됩니다.