🏋️♀️ useMemo
리액트의 기본 훅들이 익숙해지니.... 이제는 최적화에 눈이 가기 시작합니다. 리소스를 아끼고 싶고, 원하는대로 딱딱 동작하는 웹을 개발하고 싶어집니다. 그렇기에 Usememo, usecallback같은 훅을 공부해보록 합시다!
🏄♀️ Memo란?
메모이제이션이라는 의미는, 동일한 값을 리턴하는 함수를 반복적으로 호출해야하는 상황에 그 함수의 계산값을 메모리에 저장해두고 값을 가져오는 것을 말합니다. 즉, 계산을 계속 하는게 아니라 저장해둔 것을 사용하는 것입니다.
함수형 컴포넌트
함수형 컴포넌트는 말 그대로 '함수'입니다. <렌더링이 된다. = 불러진다. = 내부 다시 불러온다.> 과정을 거치기 때문에, 아주 복잡한 계산식을 가지고 있는 컴포넌트라면 그만큼 리소스가 들 것입니다.
이럴경우 usememo를 사용하면, 컴포넌트 내부의 복잡한 계산식을 처음에 한번만 계산하고, 그 값을 불러오는 식으로 동작하게 할 수 있겠습니다.
🏄♀️ Usememo 구조
const value = useMemo(()=>{ return ...}, [])두개의 인자를 받는데, 첫번째 인자는 콜백함수. 두번째 인자는 Def입니다. UseEffect와 같이 def에 들어있는 변수가 변할때마다 다시 메모이제이션해주는 겁니다!
남용 금지
usememo는 말그대로, 메모리의 일부를 사용하겠다는 것을 의미합니다. 그렇기 모든 경우에 사용하면 불필요한 값들까지 메모리에 저장되어 오히려 손해일 수도 있습니다. 따라서 필요한 경우에, 적절히 사용하는 것이 최적화를 위한 올바른 길이겠습니다!
🏄♀️ 사용하는 곳
1. 복잡한 계산식이 있을 때
function
프론트엔드 개발자