[React] 최적화 1. useMemo

🔮 Memoization

이전에 풀었던 문제의 답을 기억해둔 다음 같은 문제가 나온다면 기억해 두었던 답을 다시 적는 방법.

즉, 연산 과정 최적화 가능!

🔮 목표

1. emotion 점수에 따른 일기 개수 카운팅
2. emotion 점수 비율 카운팅

📐 getDiaryAnalysis 함수 만들기

// App.js
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 };
};

• filter 함수를 통해서 3이상이면 “기분이 좋다”고 판단. = goodCount
• 전체 데이터 - goodCount = badCount
• goodRatio : goodCount의 비율
• getDiaryAnalysis() : 객체를 반환

// App.js
const { goodCount, badCount, goodRatio } = getDiaryAnalysis();

return (
  <div className="App">
    <DiaryEditor onCreate={onCreate} />
    <div>전체 일기 : {data.length}</div>
    <div>기분 좋은 일기 개수 : {goodCount}</div>
    <div>기분 나쁜 일기 개수 : {badCount}</div>
    <div>기분 좋은 일기 비율 : {goodRatio}</div>
    <DiaryList onEdit={onEdit} diaryList={data} onRemove={onRemove} />
  </div>
);

객체를 반환하는 함수 getDiaryAnalysis()를 객체 형태로 받는다. -> return문에 사용.
콘솔창에 “일기 분석 시작” 이 2번 뜨는 이유

제일 처음 App 컴포넌트가 랜더링될 때, useState로 인해서 빈 배열이 랜더링되면서 한 번, 그리고 getData를 통해서 받은 데이터를 리랜더링할 때 한 번 총 2 번이 사용된다.

📍 Memoization 활용

❓ 문제점 ❓
일기를 수정하면 리랜더링이 되는데, 이때는 감정 점수와는 무관하므로 불필요하게 리랜더링되고 있다.

💡 해결책 💡 최적화 1. useMemo() 사용 -> HOW? : Memoization 하고싶은 함수를 감싸주면 된다.

const getDiaryAnalysis = 최적화 1. 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 };
});

const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

• 최적화 1. useMemo() 함수의 값으로 전달 -> useEffect() 처럼 deps까지 전달(deps가 변할 때만 함수 호출)
• 최적화 1. useMemo()의 사용하게 되면 getDiaryAnalysis는 더이상 함수가 아니다. (useMemo의 구현부가 리턴하는 값 을 리턴)
  

이 과정을 Memoization이라고 하고 연산 최적화라고도 한다.

🌗 결과

일기 분석 시작 개수 잘 보기
감정 점수에 따라 일기 개수 카운팅 🔽

일기 추가 = data.length 변화 = getDiaryAnalysis 사용 = 일기 분석 시작 개수 + 1 🔽

일기 수정 = data.length 변화 X = useMemo() 때문에 구현부 적용 X = 일기 분석 시작 개수 동일 🔽