Memoization(최적화)

이미 계산 해본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해 두었던 데이터를 반환 시키게 하는 방법

연산 과정을 최적화한다.

❌ Memoization 미적용

일기의 감정점수의 통계치를 구하는 함수를 통해 Memoiation기법을 사용할 것이다.

1. getDiaryAnalysis()함수 생성

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 }
    }

getDiaryAnalysis() 함수는 각 계산한 값을 객체 형태로 리턴을 한다.

2. 함수의 리턴 값을 변수에 할당

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

호출을 하면서 리턴한 값을 비구조 할당을 통해 변수에 담는다.

3. 할당된 값 사용하기

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

브라우저 화면에 나타나게 된다.

Memoization을 사용하지 않은 상황은 App.js가 리렌더링 될때마다, getDiaryAnalysis()함수가 변화하지 않았음에도 리렌더링 된다.

---

⭕ Memoization 적용

1. useMemo()

useMemo(콜백함수, []);

import { useMemo, useEffect, useRef, useState } from 'react';

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

• useMemo()를 사용하면 Memoization기법을 사용 할 수 있다.
• useMemo()는 콜백 함수의 retrun값을 반환한다.
• 또한, useMemo()의 두번째 매개변수인 []배열의 값이 변화하게 되면 콜백함수를 호출을 한다.
• 즉, []안에 있는 값이 변화를 하게 된다는 순간에만 getDiaryAnalysis의 값을 변경하고, 그 이외의 상황에서는 반환한 값을 기억해, App.js가 리렌더링 되어도, 리렌더링을 하지 않는다.

2. 변수에 할당

const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

• 이전에는 함수로서 호출하여 객체를 반환하는 형태였다면, useMemo()을 이용하게 되면 useMemo()의 콜백함수의 return값을 변수에 할당하는 형태가 된다.
• 따라서, 비구조할달을 할때에도 객체 값을 가진 변수로서 할당을 해줘야 제대로 작동을 한다.

data.length가 변화하지 않는 상황에서 App.js가 리렌더링 될때에는
getDiaryAnalysis의 useMemo의 콜백함수가 실행되지 않으며,
data.length가 변화할때만, getDiaryAnalysis의 useMemo의 콜백함수가 호출된다.