React.memo, useMemo, useCallback

요약

메모이제이션

React.memo

React.memo 원리

React.memo를 사용해야 하는 경우(React 구성 요소가 다음과 같은 경우)

1. 동일한 props가 주어지면 항상 동일한 것을 렌더링하는 경우(즉, 일부 데이터를 가져오기 위해 네트워크 호출을 해야 하고 데이터가 동일하지 않을 가능성이 있는 경우 사용하지 마세요)

2. 렌더링 비용이 많이 들 경우(렌더링하는 데 최소 100ms가 소요됨)

3. 자주 렌더링하는 경우

사용법

/* 
	1. export 시켜줄 컴포넌트명을 React.memo로 감싸주는 방법
	같은 props로 렌더링이 자주 일어나는 컴포넌트, 렌더링에 리소스 소모가 큰 컴포넌트에 사용
*/
export default React.memo(component);

const MyComponent = React.memo((props) => {
	return (/*컴포넌트 렌더링 코드*/)}
);

/* 
	2. Reac.memo의 두번째 인자로 넣어주는 방법
	넘겨받은 props의 변경 여부는  shallow compare로 비교되므로, 
	object의 경우 같은 값을 참조하고 있는지를 비교한다(불변성 고려)
*/
function MyComponent(props) {
  /* 컴포넌트 로직 */
}
function areEqual(prevProps, nextProps) {
	/*
	전달되는 nextProps가 prevProps와 같다면 true를 반환, 같지 않다면 false를 반환해 준다.
	*/
}
export default React.memo(MyComponent, areEqual);

useMemo

사용법

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

useCallback

사용법

import React, {useSatate} from 'react';
import {saveToServer} from './api';
import UserEdit from './UserEdit';

function Profile(){
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const onSave = useCallback(() => saveToServer(name, age), [name, age]);
  return (
    <div>
    	<p>{`name is ${name}`}</p>
    	<p>{`age is ${age}`}</p>
	<UserEdit onSave={onSave} setName={setName} setAge={setAge} />
    </div>
  );
}

React.memo / useMemo / useCallback

공통점

• React.memo, useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.

차이점

• React.memo는 HOC이고, useMemo와 useCallback은 hook이다.

• React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, useMemo와 useCallback은 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능하다.

• React.memo는 컴포넌트 자체를 메모이제이션하고, useMemo는 값을 메모이제이션하며, useCallback은 콜백 함수를 메모이제이션합니다.

• React.memo는 컴포넌트의 렌더링을 최적화하기 위해, useMemo는 값의 계산을 최적화하기 위해, useCallback은 콜백 함수의 생성을 최적화하기 위해 사용됩니다.

• React.memo는 props의 변경 여부를 체크하여 렌더링을 스킵하고 결과를 재사용합니다. useMemo는 의존성 배열에 있는 값이 변경될 때만 함수를 다시 실행합니다. useCallback은 의존성 배열에 있는 값이 변경될 때만 새로운 콜백 함수를 생성합니다.

참고한 사이트