useCallback, useMemo, React.memo에 대해 알아보자!

최초 작성일 : 2024.09.10

최종 수정일 : 2024.09.10

 

1. 개요

웹 또는 앱을 개발하고 운영하다보면 점점 최적화가 필요해진다. 이 때 자주 사용하는 메모이제이션(memoization)인 useCallback, useMemo hook과 고차 컴포넌트 React.memo에 대해 정리해 보았다.

 

2. 3줄 요약

바쁜 분들을 위한 3줄 요약

useCallback : 함수를 메모이제이션 해야할 때

useMemo : 값을 메모이제이션 해야할 때

React.memo : 컴포넌트를 메모이제이션 해야할 때

 

3. 메모이제이션?

메모이제이션은 이전에 계산한 결과를 캐싱해두고 동일한 입력이 주어졌을 때 캐싱된 값을 반환하는것을 말한다.

어떤 결과를 얻기 위해 계산 과정을 거치는데 만약 이런 결과가 무겁고 오래 걸리는 연산이라면 결과를 출력하는데 시간이 걸릴 수 있다.

하지만 메모이제이션을 이용한다면, 이전에 캐싱된 데이터를 재사용하게 됨으로써 성능을 최적화할 수 있다.

React의 경우, 최초 렌더링시 함수들을 메모리에 저장하는데 재랜더링이 발생하면 메모리의 함수를 지우고 새 함수를 메모리에 저장하는 작업을 한다. 메모이제이션을 이용한다면 이 때 불필요한 함수 재정의 동작을 줄일 수 있다.

 

4. useCallback

https://ko.react.dev/reference/react/useCallback

useCallback – React

useCallback은 함수를 메모이제이션 해서 컴포넌트 리랜더링시 함수가 새로 정의되는것을 방지할 때 사용한다.

의존성 배열이 변경되지 않는 한 기존 메모리에 저장되어있는 함수를 재사용한다.

event handler를 자식 컴포넌트로 전달할 때 자식 컴포넌트가 불필요하게 리렌더링되는것을 방지할 때 사용할 수도 있다.

 

사용 방법

const cachedFn = useCallback(fn, dependencies)

fn에 메모이제이션할 함수, dependencies에 의존성 배열을 넣으면 함수를 메모이제이션 할 수 있다.

 

5. useMemo

https://ko.react.dev/reference/react/useMemo

useMemo – React

useMemo는 값을 메모이제이션해서 불필요한 재계산을 방지할 때 사용한다.

의존성 배열이 변경되지 않는 한 이전에 계산된 값을 재사용한다.

특정 값을 계산하는데 드는 비용이 크고, 값이 자주 변하지 않을 때 사용할 수 있다.

 

사용 방법

const cachedValue = useMemo(calculateValue, dependencies)

calculateValue에 메모이제이션할 값, dependencies에 의존성 배열을 넣으면 값을 메모이제이션 할 수 있다.

 

6. React.memo

https://ko.react.dev/reference/react/memo

memo – React

React.memo는 컴포넌트를 메모이제이션해서 불필요한 재렌더링을 방지할 때 사용한다.

props로 입력되는 값이 변경되지 않는 한 이미 렌더링된 결과(JSX)를 재사용한다.

단, props를 비교할 때 얕은 비교(shallow comparison)를 사용하기 때문에 참조형 데이터(객체, 배열)의 경우 주의가 필요하다.

부모 컴포넌트가 자주 리랜더링되고, 자식 컴포넌트가 리랜더링될 필요 없을 때 사용할 수 있다.

 

사용 방법

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

SomeComponent에 JSX를 return하는 함수를 넣는다. SomeComponent의 props가 변경되지 않으면 캐싱된 컴포넌트를 재사용한다.

 

7. 정리

메모이제이션 개념과 앞서 설명한 내용들은 처음 들었을 때 이해하기 다소 어려울 수 있다.

이 글에서는 자주 사용하는 최적화 방법인 useCallback, useMemo, React.memo를 최대한 압축해서 이해하기 쉽게 설명하려 노력했다.

이 글이 최적화를 처음 입문하려는 분들에게 도움이 되었으면 좋겠다.