💻 React - 메모이제이션(Memoization)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

1. useMemo
2. React.memo
3. useCallback

0. 메모이제이션(Memoization)

메모이제이션은 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계싼을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다.

React에서 메모이제이션을 하는 방법
1. useMemo
2. React.memo
3. useCallback

1. useMemo

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 이전 값을 기억해두었다고 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. 메모이즈 된 값을 return하는 Hook이다.

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

2전쨰 인자로 넘어온 의존 인자 중에 하나라도 값이 변경되면 1번째 인자의 함수를 재실행한다. 만약 인자를 전달하지 않는다면 매번 새롭게 계산하여 return한다.

2. React.memo

함수 컴포넌트에서는 라이프 사이클을 사용할 수 없다. 그래서 React.memo라는 함수를 사용한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화 해 줄 수 있다.

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

이전과 같은 props가 들어올 때는 렌더링 과정을 스킵하고 가장 최근에 렌더링된 결과를 재사용한다.
다만, 컴포넌트 내부에서 useState같은 훅을 사용할 때 상태가 변경 되면 리렌더링된다.

3. useCallback

useCallback을 사용하면 만들어 놨던 함수를 재사용할 수 있다. 컴포넌트가 렌더링 될 때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우, 자식 컴포넌트에 Prop으로 새로 생성된 함수가 넘겨지게 되면 불필요한 리렌더링이 일어날 수 있다.

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

위의 예시처럼 name과 age값이 변하지 않으면 같은 함수가 전달되어 리렌더링을 방지할 수 있다.

useMemo는 함수의 연산량이 많을 때 이전 결과값을 재사용하는 목적이고 useCallback은 함수가 재생성 되는 것을 방지하기 위한 목적이다.

🔥 느낀점

리액트 훅을 사용할 때 useState, useEffect 만 많이 사용해보고 나머지는 사용해본 적이 없었는데 새롭게 메모이제이션에 대해서 알게 되어 다음 프로젝트를 할 때에는 최적화에 조금 더 신경쓸 수 있을 것 같다.

말하면서 배워요 스터디에서 리액트를 다루기로 하였는데 조금 더 깊게 공부하여 다시 정리해보도록 하겠다. 오늘도 수고했다~

Refer

• 프로그래머스 데브코스
• Hooks API Reference
• 김민준 저, ⌜리액트를 다루는 기술(개정판)⌟, 길벗