React 성능 최적화 훅 useMemo

우리가 살펴볼 첫 번째 성능 최적화 훅은 useMemo입니다.

이 훅은 화면 재렌더링 사이에 리소스 집약적인 작업의 결과를 캐시하는 데 도움을 주며, 따라서 불필요한 복잡한 계산을 피할 수 있게 합니다. 이러한 캐싱을 메모이제이션이라고도 합니다.

작동 방식을 살펴보겠습니다. 버튼과 h3 제목이 있는 컴포넌트를 만들어 봅시다:

App.jsxreturn (
  <div>
    <h3>텍스트</h3>
    <button>클릭</button>
  </div>
);

이제 제목을 클릭하면 색상이 주황색에서 녹색으로 그리고 다시 되돌아가도록 만들어 보겠습니다. 먼저 isGreen 상태를 만들어 봅시다:

App.jsxconst [isGreen, setIsGreen] = useState(false);

제목의 style 속성에 제목 색상 변경 조건을 추가하고 클릭 핸들러를 연결하겠습니다:

App.jsx<h3 onClick={() => setIsGreen(!isGreen)}
  style={{ color: isGreen ? 'green' : 'orangered' }}
>텍스트</h3>

또한 우리 버튼을 클릭할 때마다 증가하는 어떤 값을 만들어 봅시다. 이를 위한 상태를 만들겠습니다:

App.jsxconst [num, setNum] = useState(0);

버튼 클릭 처리를 추가하겠습니다:

App.jsx<button onClick={() => setNum(num + 1)}>
  클릭 수
</button>

또한 num 값의 제곱을 반환하는 함수 square가 있다고 가정해 보겠습니다. 함수 호출의 결과는 변수 result에 기록합니다:

App.jsxconst result = square(num);

function square(num) {
  return num * num;
}

버튼 텍스트에 result를 표시해 보겠습니다:

App.jsx<button onClick={() => setNum(num + 1)}>
  클릭 수: {result}
</button>

결과적으로 다음과 같은 동작이 만들어졌습니다: 버튼을 클릭하면 num 값이 변경되고, 그 값이 제곱되며, 제목을 클릭하면 제목 색상이 변경됩니다.

우리의 컴포넌트는 매우 작고, 제목을 클릭하여 색상을 변경할 때마다 전체 컴포넌트가 다시 렌더링되고, 따라서 버튼과 연결된 계산들도 다시 수행되지만, 심지어 우리가 그 버튼을 건드리지 않았음에도 불구하고 모든 것이 빠르게 작동합니다. 만약 우리의 계산이 복잡하고 매번 모든 것을 다시 계산해야 한다면 상상해 보십시오.

함수를 약간 무겁게 만들어 보겠습니다. 이제 조금 더 오래 생각하도록 만들어 볼 것입니다. 이렇게 하면 오래 걸리는 계산을 시뮬레이션할 수 있습니다:

App.jsxfunction square(num) {
  let startTime = performance.now();
  
  while (performance.now() - startTime < 500) {
    // 아무것도 하지 않음...
  }
  
  return num * num;
}

이제 제목을 클릭해 보십시오. 함수 square의 긴 작업 시간 때문에 (그리고 우리는 버튼을 건드리지 않았습니다!) 제목 색상이 변경되기 위해 영원히 기다려야 합니다!

이때 useMemo 훅이 우리를 도와줍니다. 이를 위해, 첫 번째 매개변수로 캐시하고 싶은 값을 계산하는 함수를 전달해야 합니다. 이 함수는 순수 함수여야 하며 매개변수를 받지 않아야 합니다. 두 번째 매개변수로는 대괄호 안의 의존성 배열, 즉 함수 코드에 참여하는 모든 반응형 값들을 전달합니다. 따라서, 이제 result 안에 다음과 같은 구문을 작성하겠습니다:

App.jsxconst result = useMemo(() => square(num), [num]);

다시 제목을 클릭해 보십시오. 이제, 계산이 있는 버튼을 건드리지 않고 상태 num 값을 변경하지 않으면, 아무것도 다시 계산되지 않으며, React는 버튼에 캐시된 값을 표시하므로, 우리의 제목이 빠르게 색상을 변경합니다.