[React] 메모이징 (React.memo, useCallback, useMemo)

안녕하세요, 피터팬입니다!
오늘 배워 볼 것은 React의 메모이징 기법인데요.

React의 메모이징 기법에는 React.memo, useCallback, useMemo 이렇게 3가지가 있습니다.

 

1. React.memo

• React.memo란?

부모 컴포넌트가 렌더링 될 때 해당 컴포넌트에 속하는 모든 자식 컴포넌트 또한 렌더링됩니다. 하지만, 부모 컴포넌트에서 자식 컴포넌트로 내려주는 props가 바뀌지 않았다면, 해당 자식 컴포넌트를 리렌더링하지 않아도 될 것입니다. 컴포넌트에서 리렌더링이 필요한 상황에서만 해주도록 설정할 수 있는데 이 때 사용하는 함수가 바로 React.memo 함수입니다.

• 사용 예시

const Output = () => {return()};
export default **React.memo(Output)**;

React.memo(Output)을 통해 export한 Output을 메모이징시킵니다.

• React.memo처리 과정

기존 Component와 바뀐 Component 비교

→ 같다면 렌더링 x

→ 다르다면 렌더링 o. 이 때, ===로 비교하기에 primitive value(boolean,string,number)은 변하지 않았다면 렌더링 x. but reference value(function.object,array)는 변하지 않아도 재렌더링 o

⇒ reference value를 받는 Component에는 React.memo가 쓸모 없음

• 언제 React.memo를 써야 할까? ; 같은 props로 렌더링이 자주 일어나는 컴퍼넌트

 

2. useCallback

useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다.

• 사용 예시

const onChange = useCallback(()=>{ },[ ]);

[ ]안에는 함수 안에서 사용하는 상태 혹은 props를 포함시켜야 합니다.

[ ]안의 값을 저장해두었다가, [ ]안의 값이 변경되면 콜백함수가 실행됩니다.

• Callback Function(고차 함수) ; 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수

 

3. useMemo

useMemo는 위에서도 말했듯이 특정 결과값을 재사용할 때 사용합니다. useCallback보다는 사용 빈도수가 적습니다.

• 사용 예시

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

useCallback과 같이 의존성(두 번째 인수)이 변경되었을 때만 메모이제이션된 값만 다시 계산합니다. 배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 될 것입니다.

특징

• 메모이징 기법인 React.memo, useCallback, useMemo 모두 꼭 필요할 때만 사용해야합니다. 메모이징은 값을 재활용하기 위해 따로 메모리를 소비해서 저장 해놓기 때문입니다. 따라서 불필요한 값을 모두 메모이징해버리면 성능이 안좋아질 수 있기 때문입니다.