[React] useMemo 사용방법

useMemo는 상태가 변했는 지를 확인하여 상태가 변하지 않았으면 함수를 실행하지 않게 만드는 랜더링 최적화 방법이다.

import { useMemo } from "react";

 const getDiaryAnalysis = useMemo(() => {
    console.log("useMemo 시작");

    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;

    return { goodCount, badCount, goodRatio };
  }, [data.length]);

deps에 data.length 배열을 넣어주면 data.length가 변하지 않으면 함수를 실행하지않고 return하게 된다.