useMemo

useMemo()

  const getDiaryAnaylysis = () => {
    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 } = getDiaryAnaylysis();

일기에 좋은감정 + 나쁜감정 + 좋은 감정의 일기 비율에 대해서 보여주려고 한다

다만, 콘솔을 찍어서 확인해보니

일기를 수정할 때에도 호출이 되는 등 함수가 호출될 필요가 없는 상황에서도 불필요하게 호출이 되고 있었다

이럴 때 값을 기억하고 있는 useMemo 훅을 사용해보자 (연산결과 저장)

  const getDiaryAnaylysis = 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]);

  const { goodCount, badCount, goodRatio } = getDiaryAnaylysis;

useMemo로 감싼 후에는 더이상 함수가 아니기에 실행시키면 안됨

useMemo로 감싼 뒤에는 의존성 배열에 무엇이 바뀔때 호출이 될지를 적어두어야 함