useMemo로 최적화하기

TOC

1. memoization
2. useMemo ? before : after

1. memoization

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

memoization의 사전적 정의

함수의 값을 저장해 놓고 그 값과 동일한 값이 똑같이 일어난 경우 저장되어 있는 값을 반환해 줌으로써 함수의 호출을 줄일 수 있다.

react에서의 useMemo 컨셉

memoization의 기본 컨셉은 어떤 값을 구독하고 그 값의 변화 유무에 따라 어떠한 행동(함수)를 실행할지 말지의 분기를 나누어 줌으로써 마치 event가 동작하는 방식대로 필요한 경우에만 행동을 실행하게 하여 속도를 높이는 최적화 작업이다.

useMemo ? before : after

before

functional component에서 외부 함수를 호출하는 경우
useMemo함수를 사용하는 것

before

after

console에서 function 함수 호출이 되는 기점이 setState가 변경되면서 render가 새롭게 되는데 이 때 함수는 불려질 필요가 없다 state가 저장되어 실질적인 값인 list가 추가되었을 경우에만 함수가 호출되면 되기 때문에

memo를 통한 optimization이 효과적으로 작동하게 된다.

3. 총총

memoization의 사용법과 functional components에서 외부 함수를 호출하는 것의 비용이 비싸고 이를 최적화 하는 것은 필수이다.

-자료는 책 [리액트를 다루는 기술] 을 참고하였습니다.