오늘 목표

• 연산 결과 값을 재사용, Memoization 기법을 적용한 연산 최적화

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

Memoization이란?

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

기분이 좋았던 일기 개수, 기분이 나빴던 일기 개수, 기분 좋은 일기 비율을 계산하는 함수 getDiaryAnalysis를 만든다.

  const getDiaryAnalysis =  () => {
    console.log("일기 분석 시작!");
    
    const goodCount = data.filter((item) => item.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
    
  }
  
   return (
    <div className="App">
      <Lifecycle />
      <DiaryEditor onCreate={onCreate}/>
      <div>전체일기 : {data.length}개</div>
      <div>기분 좋은 일기 개수 : {goodCount}개</div>
      <div>기분 나쁜 일기 개수 : {badCount}개</div>
      <div>기분 좋은 일기 비율 : {goodRatio}%</div>
      <DiaryList onRemove={onRemove} onEdit={onEdit} diaryList={data}/>
    </div>
  );
  

여기서 컴포넌트를 수정할 경우, 리렌더가 되어 연산도 다시 실행된다.
연산을 다시 실행하지 않기 위해서 Memoization을 이용한다.

Memoization은 React Hook useMemo를 통해 할 수 있다.

(1) Memoization 하고싶은 함수를 useMemo로 감싼다.
useMemo는 첫 번째 인자로 콜백함수를 받아서 콜백함수가 리턴하는 연산을 최적화 할 수 있도록 도와준다.

(2) 배열을 전달한다.
배열에 넣은 값이 변화할 때만 첫 번째 인자로 전달한 콜백함수가 다시 실행된다.

(3) useMemo는 콜백함수가 리턴하는 값을 반환한다.
그러므로 getDiaryAnalysis 함수는 값으로 사용한다.

  const getDiaryAnalysis =  useMemo(() => {
    console.log("일기 분석 시작!");
    
    const goodCount = data.filter((item) => item.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;

이렇게 적용하면 컴포넌트의 내용을 수정해도 일기 분석 시작이 콘솔에 출력되지 않고 일기가 삭제되거나 추가될 때만 일기 분석 시작이 출력된다.