`React` 메모이제이션(useMemo)

안녕

React로 개발하다보면 불필요한 로직으로 인해 리렌더링 시 페이지의 성능이 떨어질 수 있는데

이를 방지하기 위해 useMemo 훅을 사용하여 컴포넌트를 최적화하는 방법을 적어보겠습니다

 

useMemo

 

useMemo는 React에서 제공하는 훅으로 특정 결과를 메모이제이션하여 성능을 최적화하고

의존성 배열을 사용해 값이 변경되지 않으면 계산을 반복하지 않고 저장된 결과를 재사용함

 

코드 예시

import React, { useState, useMemo } from "react";

const HeavyComponent = () => {
  const [value, setValue] = useState(0);

  const heavyWork = () => {
    for (let i = 0; i < 100000; i++) {} // 무거운 작업 시뮬레이션
    return 100;
  };

  const sampleValue = useMemo(() => heavyWork(), []);

  return (
    <div>
      HeavyComponent
      <p>나는 {sampleValue}를 가져오는 엄청 무거운 작업을 하는 컴포넌트야!</p>
      <button
        onClick={() => {
          setValue(value + 1);
        }}
      >
        누르면 아래 count가 올라가요!
      </button>
      <br />
      {value}
    </div>
  );
};

export default HeavyComponent;

 

 

heavyWork 함수는 실제로는 아무 일도 하지 않지만

반복문을 통해 무거운 작업을 시뮬레이션하고 그 결과로 100을 반환하는 함수임

 

useMemo 를 사용하여 최적화

 

• sampleValue는 useMemo를 사용해 heavyWork의 결과를 저장
• 의존성 배열을 빈 배열로 설정하여 컴포넌트가 처음 렌더링될 때 한 번만 heavyWork가 실행됨
• 이후 컴포넌트가 리렌더링되면 heavyWork가 재실행 되지 않고 메모이제이션된 sampleValue 값을 사용

버튼 클릭 시 value 상태가 업데이트되면 컴포넌트가 리렌더링되는데

sampleValue는 처음 계산된 값을 계속 유지하며 heavyWork는 실행되지 않기에 성능이 최적화됨

 

결론

useMemo는 불필요한 연산을 줄여 성능을 최적화 시켜주는 훅이며

사용자에게 더 나은 서비스를 제공시킬 수 있음 코드 예시처럼 상태가 업데이트 되어

리렌더링 될 때 특정 함수나 계산이 다시 실행될 필요가 없으면 사용ㄱㄱ