[React] Memoization - 연산결과 재사용 : UseMemo

<Udemy 리액트 챌린지 3주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍

---

연산 결과값을 재사용하는 방법

> 현재 데이터에서 변화하지 않을 때 값을 다시 계산하지 않도록 하기

Memoization

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

 

React 프로젝트에서 Memoization 활용

감정 점수로 기분이 좋은 일기와 나쁜 일기의 갯수, 비율을 계산하는 함수를 구현

출력결과

console을 확인해보면 getDiaryAnalysis() 가 여러번 호출된걸 확인 할 수 있다.

👉 맨처음 State가 선언될 때 한 번, api에서 데이터 가져와서 setData 할 때 리렌더링 되면서 App() 함수가 호출될 때마다 getDiaryAnalysis가 호출돼서 그럼

 

리렌더링 할 때마다 getDiaryAnalysis()가 호출되어서 연산을 하는데,

일기의 내용이 수정돼도 리렌더가 발생하면서 불필요하게 getDiaryAnalysis()를 호출한다.

감정점수가 변하지 않아서 기분 좋은/나쁜일기 갯수가 변동이 없는데도 함수를 호출하는건 불필요하다.

 

✔️ Memoization으로 해결하자!

React의 기능 useMemo를 사용하면 된다.

import {useMemo} from "react"

 

Memoization으로 최적화하고 싶은 함수를 useMemo으로 감싸면 된다.

 & Dependence Array를 전달 👉 Dependence Array의 값이 변화할 때만 함수가 수행됨

👉 배열 data의 길이가 변화할 때만 함수가 수행된다.

 

그러나! 오류 발생!!!

Error > getDiaryAnalysis is not a function

💡 useMemo를 사용할 때 가장 많이 실수하는 부분 ⭐️

 

👉 useMemo를 사용하고 나면 더 이상 getDiaryAnalysis() 함수가 아니다! 

useMemo는 콜백함수가 리턴하는 값을 리턴하기 때문에, getDiaryAnalysis() return값인 {goodCount, badCount, goodRatio}가 담기게 되므로 함수처럼 호출하면 안된다.

 

이렇게 호출부를 함수로 호출하지 않도록 수정해줘야한다.

 

결론!

useMemo로 Memoization을 하면 특정 값이 변할 때만 연산을 할 수 있도록 최적화가 가능하다!

 

---

리액트에는 유용한 라이브러리가 많이 제공된다는 점을 새삼 또 실감했다. 이번 수업에서는 useMemo를 사용해서 불필요한 연산을 줄였다.

지금껏 프로그램을 개발해오면서 이런 최적화를 하고 싶었지만 그냥 큰 연산이 아닐 것이라 생각하며 그냥 냅두거나, 데이터를 직접 배고해가며 연산 수행여부를 결정하도록 구현했던 기억이 있어 더욱 유용하게 느껴지는 것 같다.

그런데 또 내가 원래 사용하던 언어들에도 이런 기능을 하는 라이브러리가 있을 것 같은데 내가 알지 못해서 못 사용한 건 아닐까 하는 생각이 들었다. 좋은 라이브러리가 제공됨에도 모르고 못쓰는 건 비효율적일 수 있다. 공부의 필요성을 또 느낀다.

 

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)