<aside> 💡 **세부 목표

현재 일기 데이터를 분석하는 함수를 제작하고 해당 함수가 일기 데이터의 길이가 변화하지 않을 때 값을 다시 계산하지 않도록 하기

• Memoization 이해하기**

</aside>

사용될 hook

userMemo

해당 함수는 App.js 에 일부를 가져온 것인데 이 함수가 한 번만 실행되는 게 아니라 App.js가 rerender 되는 순간에도 계속 실행되기에 불필요한 실행이 반복된다.

또한, 일기를 수정할 때는 감정을 변화 시킬 수도 없는데도 해당 함수가 실행된다.

이를 해결하기 위해선 useMemo를 사용한다!

const getDiaryAnalysis = () => {
    console.log("일기 분석 시작");

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

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

💡 useMemo 사용하기

최적화 위한 함수에 useMemo를 이용해 해당 함수를 감싸주고 감싸준 함수 뒤 dependency array에 어떤 값이 변화할 때만 이 연산을 다시 수행 할 지를 명시하여 연산 최적화를 할 수 있다.

→ 아래에서는 data.length가 변화할 때만 해당 함수 수행함

주의할 사항은 useMemo를 사용할 시 해당 함수는 더 이상 함수가 아니라 값이 된다. 그러므로 어디선가 호출할 때 함수처럼 호출하면 X

또한, 함수 그 자체를 prop으로 줘야하는 경우도 사용하면 안됨 값으로 반환되기 때문에

const getDiaryAnalysis = useMemo(() => {
    console.log("일기 분석 시작");

    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]);

  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;