Hook Series 5 : useMemo와 memoization📝

1. memoization🗃️

01. memoization이란?

memoization은 React 컴포넌트의 렌더링 성능을 최적화하는 기술로, 이전에 계산한 값을 메모리에 저장(캐싱 caching)하여 동일한 계산을 반복하거나 컴포넌트의 불필요한 리렌더링을 방지한다. 즉, 동일한 계산을 요구할 때, 계산을 다시 하는 것이 아닌 이전 결과를 재사용하여 성능을 높인다.

*캐시 Cache란? : 데이터나 값을 미리 복사해 놓는 임시 장소. 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용하는 임시 저장 공간으로, 이를 사용해 값을 임시로 저장해두는 것을 "캐싱 caching"이라고 한다.

02. memoization을 적용할 때

• 대규모 데이터를 처리하는 테이블
• 복잡한 계산을 수행하는 대시보드
• 다수의 자식 컴포넌트를 포함하는 리스트

그 외에도 쓰로틀링, 디바운싱 등 컴포넌트가 리렌더링 될 때 동일한 함수를 재생성을 방지해야하거나 자식 컴포넌트의 불필요한 렌더링을 방지하여 성능을 최적화해야할 때 사용한다.

2. useMemo : React의 memoization API🔖

01. React.memo

React.memo는 함수형 컴포넌트의 렌더링 결과를 메모이징하는데 사용한다. 즉, props의 변경이 없다면 이전 렌더링의 결과를 재사용한다. 이는 다수의 자식 컴포넌트가 있는 경우, 자식 컴포넌트까지 리렌더링을 하지 않아도 되어 성능을 향상시킬 수 있다. props가 변경되지 않으면 리렌더링을 방지하지만, 내부 state가 변경되면 리렌더링이 된다.

• 사용 방법 : React.는 생략이 가능하다!

const App = (props) => {
    // 렌더링 로직...
};

export default React.memo(App);
    

const App = memo((props) => {
	//렌더링 로직...
});

02. useMemo

useMemo는 특정 계산의 결과(함수의 return 값) 을 메모이징하는데 사용한다. 이는 복잡하거나 무거운 작업을 반복하지 않도록 하여 성능을 최적화한다. 즉, useMemo는 렌더링될 때마다 실행되지만, 의존성 배열 안의 값이 변경되지 않으면 이전 값을 반환한다.
useMemo는 콜백함수와 의존성 배열을 인자로 받는데, 의존성 배열 중 하나라도 값이 변경되면 콜백함수를 재실행한다.

• 사용 방법

const 이름 = useMemo(콜백함수, 의존성 배열)

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

03. useCallback

useCallback은 특정 함수를 메모이징하는데 사용한다. React 컴포넌트가 리렌더링 될 때 마다 순차적으로 렌더링을 하는데, 이때마다 동일한 함수가 새롭게 생성된다. 이는 메모리 성능을 저하시키며 자식 컴포넌트의 불필요한 리렌더링까지 야기하게 되는데, useCallback으로 함수를 메모이징하여 해결할 수 있다.
useCallback도 콜백함수와 의존성 배열을 인자로 받으며, 의존성 배열의 값이 변경되면 콜백함수를 재실행한다.

• 사용 방법

const 이름 = useCallback(콜백함수, 의존성 배열)

const [name, setName] = useState('');
const [age, setAge] = useState(0);
const onSave = useCallback(() => saveUserInfo(name, age), [name, age]);

04. 정리

API	메모이징 대상	인자
React.memo	컴포넌트	함수형 컴포넌트
useMemo	계산 값(함수 return 값)	콜백함수, 의존성 배열
useCallback	함수	콜백함수, 의존성 배열

memoization 참고 사이트 1
memoization 참고 사이트 2
memoization 참고 사이트 3
캐시/캐싱 참고 사이트