useMemo란?

​React에서 제공하는 훅 중 하나로, 성능 최적화를 위해 사용되요

기본적으로 useMemo는 값을 기억(memoization)해 불필요한 연산을 방지하는 역할을 담당하고 있어요.

저의 경우엔 값은 재할당 되었으나 굳이 다시 렌더링 할 필요가 없는 작업이 있었는데 그 부분을 해결하기 위해 useMemo를 사용하였습니다!

작동원리가 어떻게 되는걸까?

// 함수 : 전달받은 파라미터에 2를 곱함
const expensiveCalculation = (num) => {
  console.log("전달받은 파라미터에 2를 곱합니다.");
  return num * 2;
};

// 메인
const MyComponent = ({ number }) => {
    const result = useMemo(() => {
        expensiveCalculation(number)
    , [number]);

  return <div>Result: {result}</div>;
};

상단의 예시 코드를 보면

매개변수 number의 값이 들어오면 useMemo에 의해 expensiveCaculation 함수가 실행되어

그 결과가 result에 담겨 요소를 반환되어지고 렌더링시 result 값을 보여주는 컴포넌트에요

useMemo는 첫번째 인자로 콜백함수를 받고 두번째 인자에는 의존성 배열을 받아요

하단의 코드를 보면 매개변수 number의 값을 전달 받으면 useMemo에 의해 expensiveCaculation 함수를 실행되게 되는데

​

만약 useMemo의 의존성 배열 속 number가 다시 재할당 된다면 각각의 상황에 따라 콜백함수 실행 여부가 달라집니다. 

number에 같은 값이 재할당 되었을때 : expensiveCaculation 실행안함

number에 이전과 다른 값이 재할당 되었을때 : expensiveCaculation 실행

​

이렇듯 useMemo는 의존성 배열의 값이 바뀌지 않으면 콜백함수를 실행하지 않아

불필요한 계산을 방지하는 효과가 있고 이에 따라 성능 개선에 도움이 됩니다.