useMemo(a.k.a 성능최적화 hook)

최적화가 왜 필요할까❓

먼저, 함수형 컴포넌트 이해하기 !

function Component() {
 const value = calculate(); 
 return <div> {value} </div>
}

function calculate() {
 return 10
}

코드설명 > Component 함수 안에, value 변수가 있으며 이 변수 안에는 calculate를 호출하는 별도의 함수가 있다.(여기서 calculate 함수는 언제나 10을 리턴한다)

함수형 component의 렌더링 ✋

기본원리 (Component 함수 호출시 모든 내부 변수 초기화)

Component 함수가 렌더링 되는 과정에서,
value 변수는 초기화 됨 !
따라서 calculate 함수의 값은 변하지도(update) 않았는데 호출됨 !

🥺 되게 비효율적이네....? useMemo 필요하네 !

🔔 useMemo를 살펴보자

1. Memo? Memoization(메모리에 넣겠다 !)

실례지만, 그래서 어쩌라는 건지?

컴퓨터 프로그램이 동일 계산을 반복

→ 계산값을 메모리에 저장 (Memoization) → 동일계산의 반복수행 제거 !

🌟 다시 말해서, 동일한 값을 반환하는 함수를 반복적으로 호출하는 경우에 그 함수의 값(value)을 메모리에 저장해뒀다가 다시 계산하지 않고, 메모리에서 저장된 값을 꺼내서 재사용하자 !

useMemo와 렌더링❓

👉 렌더링은 보통 부모component의 state 혹은 props가 변경되는 경우 ! ReRender가 발생 !

👉 본격 ! useMemo가 필요한 이유 ? 만약에 state가 여러개라면, state 한개가 update될 경우 나머지 state들도 렌더링됨. 그러니깐 ! 수정하지 않은 함수까지 재실행되는 것

궁극적인 목적 !

그러니깐, useMemo는 memorization을 통해서 함수 값을 메모리에 캐싱해두고 필요할 때 캐시에서 꺼내서 그 값을 재사용함에 있음 !
결국, "불필요한 렌더를 피하자"

useMemo의 구조❓

const value = useMemo(() => {

 return calculate();
 
}, [item])

useMemo는 콜백함수와 의존성배열로 이루어짐

👉 콜백함수에는 메모라이제이션 할 함수 값을 넣음

() => {

return calculate();

}

👉 [itme] 의존성배열 안에 있는 값이 update될 때에만 콜백함수를 다시 호출해서 메모리에 저장된 값을 update함

✋ 의존성 배열이 비어있는 경우에는 mount에만 값을 계산하고, 이후에는 memoization된 값을 꺼내옴( = 의존성 변경이 없다면, 이전에 연산된 값인 memoization value 즉, 캐시된 데이터를 리턴함)

결론

useMemo 잘 쓰면 좋지 !

하지만, 무분별하게 사용될 경우? 어찌됐든 memoization을 시킨다는 것은 데이터에 저장을 한다는 것으로 모든 함수의 값을 memoization 시킨다면? 데이터가 무분별하게 사용될 듯.....!

참고 !
https://cocoon1787.tistory.com/797
https://db2dev.tistory.com/entry/React-똑똑하게-useMemo-사용하기
https://ssdragon.tistory.com/105
https://ossam5.tistory.com/426
https://velog.io/@jinyoung985/React-useMemo%EB%9E%80
https://velog.io/@kysung95/짤막글-useMemo
https://callmedevmomo.medium.com/web-reack-hooks-api-usememo-쉽게-이해하기-d0b4f16567c1
https://velog.io/@rkio/React-useMemo-사용-시-dependency-Array-유무에-따른-차이