[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - Memoization
학습 목표
memoization을 이해하고 렌더링 최적화 방법을 익힙니다.
memoization이란?
💡 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 사용함으로써 동일한 계산의 반복 수행을 제거하여 성능 향상을 도모하는 기술
useCallback
함수형 컴포넌트에서 함수를 메모이제이션하는 데 사용한다.
사용 방법
useCallback(fn, dependencies)예시
카운트를 증가시키는 함수를 생성하고 이를 집합에 넣어보자.
const functionSet = new Set();
const App = () => {
const [count, setCount] = useState(0);
const increament = setCount((prev) => prev + 1);
functionSet.add(increament);
console.log(functionSet);
return (
<>
<h1>Count: {count}</h1>
<button onClick={increament}>increase</button>
</>
);
};집합을 출력해보면 카운트를 증가시킬 때마다 increment 함수가 추가되는 것을 확인할 수 있다.
왜 추가될까?
카운트가 증가될 때마다 App컴포넌트가 rerendering 되는데, 이때 함수의 참조값인 increment가 갱싱되기 때문에 js는 이를 다른 객체로 인식해서 집합에 계속해서 쌓이는 것이다.
어떻게 해결할 수 있을까?
useCallback 사용!
const functionSet = new Set();
const App = () => {
const [count, setCount] = useState(0);
const increament = useCallback(() => {
setCount((prev) => prev + 1);
}, []);
functionSet.add(increament);
console.log(functionSet);
return (
<>
<h1>Count: {count}</h1>
<button onClick={increament}>increase</button>
</>
);
};위와 같이 작성하면 useCallback이 함수를 저장하고 있기 때문에 카운트를 증가시키더라도 집합의 개체가 증가하지 않는 것을 확인할 수 있다.
주의사항
setState를 할 때 콜백함수를 사용하자
만약 setState를 사용해 상태를 업데이트할 때
const increament = useCallback(() => {
setCount(count + 1);
}, []);이런 방식으로 작성한다면 카운트는 1에서 더이상 증가하지 않을 것이다. 왜냐하면 useCallback은 스냅샷을 찍듯 함수를 저장한다. 따라서 위의 코드에서는 메모이제이션됐을 때 count가 0이었기 때문에 1에서 더이상 증가하지 않게 된다.
dependencies를 확인하자
useCallback에서는 dependencies에 등록된 값의 변화를 인지하고 변화가 일어났을 때 useCallback에 정의된 함수를 실행한다. 따라서 다음과 같이 작성했을 때
const increament = useCallback(() => {
setCount((prev) => prev + 1);
}, [count]);카운트를 증가시킬 때마다 카운트를 증가시키는 함수가 실행되기 때문에 카운트가 무한으로 증가되는 문제가 발생하게 된다.
useMemo
값을 메모이제이션하는 훅이다.
사용 방법
const cachedValue = useMemo(calculateValue, dependencies)예시
길이가 매우 긴 배열에서 특정 값을 찾아 렌더링하는 코드가 있다고 하자.
import { useState } from "react";
const initialItems = new Array(29_999_999).fill(0).map((_, i) => {
return { id: i, selected: i === 29_999_998 };
});
const App = () => {
const [count, setCount] = useState(0);
const [items, _] = useState(initialItems);
const selectedItem = items.find((item) => item.selected);
return (
<>
<h1>Count: {count}</h1>
<button onClick={() => setCount((prev) => prev + 1)}>increase</button>
<h2>{selectedItem?.id}</h2>
</>
);
};
export default App;위와 같이 작성하면 카운트가 변경될 때마다 selectedItem은 값이 변하지 않음에도 find함수가 새롭게 실행되어 성능적인 문제가 발생하게 된다.
어떻게 해결할까?
import { useMemo, useState } from "react";
const initialItems = new Array(29_999_999).fill(0).map((_, i) => {
return { id: i, selected: i === 29_999_998 };
});
const App = () => {
const [count, setCount] = useState(0);
const [items, _] = useState(initialItems);
const selectedItem = useMemo(() => items.find((item) => item.selected), []);
return (
<>
<h1>Count: {count}</h1>
<button onClick={() => setCount((prev) => prev + 1)}>increase</button>
<h2>{selectedItem?.id}</h2>
</>
);
};
export default App;
useMemo를 사용해 값을 지정해주면 그 값이 메모이제이션되어 값을 찾는 코드를 다시 실행하지 않는다.
주의사항
dependencies를 확인하자
useCallback과 동일하게 useMemo 역시 dependencies에 등록된 값의 변화를 인지하고 변화가 일어났을 때 useCallback에 정의된 함수를 실행한다. 따라서 다음과 같이 작성했을 때
const selectedItem = useMemo(
() => items.find((item) => item.selected),
[count]
);카운트를 증가시킬 때마다 selectedItem을 찾는 함수가 실행되기 때문에 useMemo를 사용하는 의미가 없어진다.
React.memo
컴포넌트를 메모이제이션할 때 사용하는 함수이다.
사용 방법
const MemoizedComponent = React.memo(SomeComponent, arePropsEqual?)예시
상위 컴포넌트에서 상태변화가 일어난다면 하위 컴포넌트는 모두 재렌더링된다. 이때 React.memo를 사용하면 재렌더링을 막을 수 있다.
import { useState } from "react";
import A from "./components/learn/A";
import B from "./components/learn/B";
const App = () => {
const [count, setCount] = useState(0);
return (
<>
<h1>App Component: {count}</h1>
<button onClick={() => setCount((prev) => prev + 1)}>increase</button>
<A />
<B />
</>
);
};
export default App;export default React.memo(A);
export default React.memo(B);주의사항
만약 B 컴포넌트에 count를 props로 넘겨주면 React.memo를 지정해줬어도 App에서 count를 증가시킬 때마다 컴포넌트가 재렌더링된다.
그 값을 사용하지 않더라도 props로 전달되는 순간부터 영향을 끼친다.
만약 함수를 넘겨준다면 useCallback으로 함수를 메모이제이션해주면 해결할 수 있다.
useCallback vs useMemo vs React.memo
| useCallback | useMemo | React.memo | |
| 참조 대상 | 함수 | 값 | 컴포넌트 |
| 훅 / 함수 | 훅 | 훅 | 함수 (고차 컴포넌트) |
*고차 컴포넌트: 컴포넌트를 반환하는 함수