[React] useMemo와 useCallback

Memoization 이란? 

Memoization이란 동일한 입력이 들어와서 기존에 수행된 연산이 반복될때, 중복된 결과를 저장하고 캐시된 결과를 반환하는 프로그래밍 최적화 기법입니다. 중복 연산을 피하여 성능을 최적화 할수있습니다. 

 Hooks는 리액트 16.8 버전에서 새로 추가된 기능입니다. Hooks는 함수 컴포넌트에서도 리액트의 상태와 라이프사이클 특징들을 사용할수 있게 해줍니다.  

 

useMemo

- useMemo를 사용하지 않았을때 

각 렌더링마다 새 배열이 선언되기 때문에 자바스크립트는 filterItems에 어떤 변화가 있다고 추측합니다. 따라서, 각 렌더링 과정마다 console.log('render')가 invoke ( 간접호출 : 어딘가에 레퍼런스를 유지한 다음 호출) 됩니다. 

이러한 불필요한 호출을 피하기 위해 useMemo를 사용할 수 있습니다. 

useMemo(compute, dependencies); 

첫번째  파라미터에는 연산을 수행하는 함수를 두번째 파라미터에는 의존성 배열을 넣어줍니다. 

만약 다음 렌더링이 발생하기 전까지 의존성 배열이 변하지 않는다면, useMemo는 memoized된 값만 리턴하고 compute 연산을 수행하지 않습니다. 

useMemo 적용

useMemo는 함수의 결과 값을 리턴합니다. 리렌더링 과정에서 비용이 많이 드는 연산 작업의 호출을 방지하기 위해 사용할 수 있습니다. 

 

useCallback

useCallback은 함수를 메모이제이션 하기 위해 사용합니다. 함수를 기억하기 때문에 의존성 배열이 변경되지 않으면 리렌더링이 일어나도 같은 함수를 참조합니다. 

자식 컴포넌트 <SomeComp> 는 부모 컴포넌트에서 생성된 함수 plusFive 를 prop으로 받습니다. 전달받은 함수는 useEffect 훅 안에서 실행되고,  해당함수가 의존성 배열으로 들어가 있습니다.

plusFive함수와 관련이 없는 작업들임에도 불구하고 리렌더링이 일어나는 조건에서는 해당 함수가 다시 호출됩니다. 

 

이러한 현상들을 방지하기 위해 우리는 useCallback을 사용할 수 있습니다. 

useCallback(function, dependencies); 

 

useCallback을 사용하면 의존성 배열을 기반으로 함수가 다시 생성되는것을 막아줍니다. useCallback은 함수를 반환합니다. 

 

useMemo(() => fn, deps)

리액트 공식문서에서 useCallback(fn, deps)와 useMemo(() => fn, deps)는 동일하다고 명시 되어 있습니다.  

 

 

 

참고 :

https://levelup.gitconnected.com/understanding-the-difference-between-usememo-and-usecallback-ec956adb2004 

https://medium.com/@jan.hesters/usecallback-vs-usememo-c23ad1dc60 

https://reactjs.org/docs/hooks-reference.html#usecallback