[React] Memoization / useMemo와 useCallback 의 차이

Memoization이란?

 

특정한 값을 저장해 두었다가, 이후에 해당 값이 필요할 때 새롭게 계산해서 사용하는게 아니라 저장해둔 값을 활용하는 테크닉이다. 

 

함수형 컴포넌트는 근본적으로 함수다. 

 

리액트는 렌더링 마다 함수형 컴포넌트를 다시 호출한다. 호출 되었을 때 함수형 컴포넌트는 이전 호출과 현재 호출간의 값을 공유할 수 없다.

따라서 함수 내에 변수가 있고 이것을 다음 호출에도 사용하고 싶다면 외부의 공간에 변수를 저장해두고 다음 호출 때 명시적으로 꺼내와야한다. ! 

 

 

리액트에서 함수형 컴포넌트 내의 값을 memoization 할 수 있도록 api를 제공한다. 

 

1. useMemo 

"값"을 memoization 할 수 있도록 해준다.

// useMemo(callbackFunction, deps]

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo에서 첫번째로 받는 인자, 콜백함수에서 리턴하는 값이 메모된다.

두번째 인자는 의존성배열이다.

 

위 코드에서는 a,b 두 변수를 이용해서 메모이제이션 하기 위한 값을 계산하고 있다. 

의존성 배열에 있는 값 중 하나라도 이전 렌더링과 비교했을 때 변경된다면 메모된 값을 활용하는 것이 아니라 새로운 값을 다시 계산한다.

 

 

2.useCallback

useCallback은 useMemo를 조금 더 편리하게 사용할 수 있게 만든 버전이다.

const memorizedFunction = useMemo(() => () => console.log("Hello World"), []);

const memorizedFunction = useCallback(() => console.log("Hello World"), []);

 

함수의 경우 useMemo를 사용해서 메모하게 되면 콜백함수에서 또 다른 함수를 리턴하는 형태가 된다. (보기 다소 불편해짐)

이 동작을 간소화한게 useCallback 

 

useMemo는 값을 반환하는 반면(함수를 실행함), useCallback은 "함수"를 반환한다.

 

 

Memoization은 언제 필요한가?

 

1. 새로운 값을 만드는 연산이 복잡하다.
2. 함수 컴포넌트의 이전 호출과, 다음 호출 간 사용하는 값의 동일성을 보장하고 싶다.

2번의 동일성 보장? 

-> 동일성을 보장해야하는 이유는 React.memo와의 연동성을 위해서이다. 

 

React.memo란?

이 컴포넌트가 리렌더링 되어야 할지 아닐지에 대한 여부를 표현할 수 있게해준다.

 

React.memo로 감싸진 컴포넌트의 경우에는 상위 컴포넌트가 리렌더링 될 경우 무조건 리렌더링 되는것이 아니라, 컴포넌트의 이전의 props와 다음 렌더링 시에 사용될 Props를 비교해서 차이가 있을 경우에만 리렌더링을 수행한다. 

차이가 없다면 -> 리렌더링 하지 않고 기존 렌더링 결과 재사용한다.

 

🤷🏻‍♀️그렇다면 비교는 어떻게????

이전 props와 새로운 props를 shallow compare 해서 판단한다. !

 

 

 

렌더링 최적화....

최적화는 공짜가 아님 ! 코드가 추가 되어야하고 복잡도가 증가 될 수 있음.

따라서 최적화 해야하는 시기는 최적화가 명확히 가치를 창출 해 낼 수 있을 것이라고 기대되는 상황에 최적화를 수행해야할 것...

 

 

Ref

https://basemenks.tistory.com/238

useCallback 과 useMemo 의 차이

원티드 프리온보딩 프론트엔드 코스 7차