useMemo
성능을 최적화하기 위하여 연산된 값을 useMemo를 이용하여서 재사용하도록 하는 Hook입니다.
React의 공식문서에는 다음과 같이 나옵니다.
https://ko.reactjs.org/docs/hooks-reference.html#usememo
[Hooks API Reference – React
A JavaScript library for building user interfaces
ko.reactjs.org](https://ko.reactjs.org/docs/hooks-reference.html#usememo)
즉 성능 최적화를 위해서 사용 할 수 있지만, 보장이 되어 있지는 않다는 것입니다.
평균 값을 계산하는 예제를 살펴보겠습니다.
useMemo를 사용하지 않을 때
Avg.js
app.js
실행 화면
개발자 도구를 확인해보면 숫자를 등록하거나 수정할 때도 getAverage 함수가 호출이 되는것을 확인 할 수 있습니다.
이번에는 useMemo를 사용해보겠습니다.
useMemo 사용
실행 화면
이제는 list의 배열이 변할때만 함수가 호출되는 것을 알 수 있습니다.
즉 리렌더링이 일어날때 useMemo를 사용하면 최적화를 할 수 있을것입니다!
이번 예제는 velopert님 예제를 참고했습니다.
VELOPERT.LOG
react-redux v7.1 alpha 에 드디어 Hooks 기능이 지원되었습니다. 아직 alpha 이기에 프로덕션에서 사용하기엔 아직 이르지만 한번 사용법을 알아봅시다. 정식 릴리즈 때 많은 변화가 없었으면 좋겠네
velopert.com
전체 소스코드는 github에서 확인 가능합니다.
https://github.com/hanhyung6376/learn-react/tree/master/use-memo