[React] useMemo

useMemo

react의 기본 동작원리는 상태(state)가 변경될때마다 re렌더링을 하는것이다

 

그렇다보니 현재 상태가 변경 될때

컴포넌트안에 포함된 기능, 함수들과 무관한 상태(state)의 변경 일때도 re렌더링이 일어나

함수의 불필요한 재실행이 일어나게 된다

 

※ 예를 들어

 

  const getDiaryAnalysis = () => {
    if (data.length === 0) {
      return { goodcount: 0, badCount: 0, goodRatio: 0 };
    }
    console.log("일기 분석 시작");

    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100.0;
    return { goodCount, badCount, goodRatio };
  };

위 의 리스트를 카운트하는 함수코드는 일기 본문의 상태값을 수정하는 것과는 아무 관련이 없지만

본문을 수정하려고 상태값을 갱신하면 re렌더링이 일어나 일기의 본문과 아무 관련이 없는 카운팅 함수가 재실행되어 콘솔에 로그가 찍히는 것을 볼 수 있다

 

 

위 의 경우처럼 불필요한 함수 재실행을 방지하기 위해 useMemo를 사용 할 수 있다

import { useMemo } from 'react';

const getDiaryAnalysis = useMemo(메모이제이션할함수,[상태변화를감지할값])

• 첫번째 인자로 메모이제이션 할 함수를 전달
• 두번째 인자로 의존성 배열을 전달하고 배열 안에 상태변경을 감지할 값을 전달한다.
• useCallback, useEffect와 마찬가지로 빈배열을 전달하게 되면 최초 1회 컴포넌트 마운트 시에만 실행 되고 아무 값도 넣지 않으면 모든 상태 변화에 반응한다.

메모이제이션(Memoization)을 통해 메모리에 첫번째 인자로 전달된 함수의 계산된 결과를 저장해놓고 두번째 인자로 받는 의존성배열에 명시된 값이 변경될 때만 재실행해 변경된 값을 저장하도록 한다.

 

useCallback 과의 차이점은 useCallback은 메모이제이션 된 콜백 함수를 반환하고

useMemo는 첫번째 인자로 전달된 함수를 실행해 계산한 뒤 리턴된 값을 메모이제이션해서 반환한다

// useMemo
const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

// useCallback
const { goodCount, badCount, goodRatio } = getDiaryAnalysis();