내일배움캠프 14주차 14-2 TIL (useMemo)

useMemo는 컴포넌트의 성능을 최적화할수있는 대표적인 hook중 하나이다

useMemo는 Memoization을 뜻하는데 Memoization라는건

기존에 수행한 연산의 결과값을 어딘가에다가 저장해두었다가 동일한 입력값이들어오면

재활용하는 프로그래밍 기법이다

 

먼저 시작하기전에 함수형 컴포넌트에 대하여 꼭 알아두도록하자

 

함수형 컴포넌트는 랜더링 => 컴포넌트 함수호출 => 모든내부변수 초기화

를 순서로 두고있는데 컴포넌트가 랜더링이될때마다 value라는 변수가 초기화가된다

따라서 calculate함수는 반복적으로 호출이된다

calculate함수가 무거운일을 하는 함수라면 엄청나게 비효율적이지 않겠는가?

 

useMemo를 사용한다면 랜더링 => 컴포넌트함수로출 => Memoize 된 함수를 재사용

으로 돌아가는 순서를 거친다 useMemo를 사용해서 memoization을해주면

calculate함수를 반복적으로 실행할 필요가없다 useMemo는 처음에 계산된 결과값을

메모리에 저장하여 컴포넌트가 반복적으로 랜더링이되어도 calculate를 다시호출하지않고

이전에 이미계산되었던  값을 메모리에서 꺼내와서 재사용을한다

 

useMemo는 첫번째 인자로 콜백함수를 두번째인자로는 의존성배열을 받는다

두번째 인자인 배열의 요소값이 업데이트될때만 콜백함수를 다시호출하여

memoization된값을 어베이트해줘서 다시 memoization을한다

dependency사용법은 useEffect와 동일하다

 

하지만 useMemo는 꼭 필요할때만 사용하는것을 권장한다

값을 재활용하기위해서 따로 메모리를 소비해서 저장을해놓기때문에

불필요한값을 모두 memoization해버리면 성능이 떨어질수있기 때문이다

 

다음에는 useCallback을 배워보자