JavaScript Sec 05_7 최적화 1 - 연산 결과 재사용 (useMemo)

Memorization

---

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

• 이 때 콘솔에는 “일기 분석 시작”이 2번 출력 된다.
  • App 컴포넌트가 mount 될 때 한 번, API를 호출하여 받아온 데이터로 인해 data state가 변할 때 리렌더 되어 두 번
• 일기 수정하기 버튼을 눌러 내용을 수정하고 수정 완료 버튼을 누를 때마다 data state가 변화해 App 컴포넌트가 리렌더 되는데, 이 때 전체 일기, 기분 좋은 일기, 기분 나쁜 일기, 기분 좋은 일기 비율들은 변하지 않는데도 계속 똑같은 연산을 반복한다. (콘솔 창에 ‘일기 분석 시작’이 계속 찍히는 것을 통해 알 수 있다.)

⇒ UseMemo 를 통한 Memorization을 통해 연산을 최적화 할 수 있다.

 

• useMemo의 첫 번째 인자에는 콜백함수, 두 번째 인자에는 의존성 배열을 넣어준다.
• 의존성 배열 안의 값이 바뀌면 콜백함수가 수행된다.
• 이제 getDiaryAnalysis는 함수가 아니라 특정 값을 저장하는 상수이므로 getDiaryAnalysis () 처럼 호출하는 게 아니라 getDiaryAnalysis로 사용해야 한다.