React - useMemo 사용법

 

react에는 변수, 함수의 성능을 최적화하는 hook인 useMemo와 useCallback이 존재한다. useMemo는 그 중에서 변수를 최적화 할 때 사용한다. useMemo는 변수의 값을 memoization한다. 여기서 memoization 이란 값을 캐싱하여 나중에 재활용하는 것을 의미한다. useMemo는 변수의 값을 memoization 하여 의존 변수가 변경되지 않으면 캐싱된 변수 값을 계속 사용한다. 만약 의존 변수가 변경되면 캐싱된 데이터를 삭제하고 새로 변수 값을 계산하여 대입한다.

 

useMemo의 형태

import { useMemo } from 'react' // useMemo 사용을 위해 useMemo import

// useMemo로 함수를 감싸기
const memoizedValue = useMemo(() => {
    ...
}, [deps]) // deps는 의존 변수

useMemo의 형태는 위와 같다. 함수를 useMemo로 감싸고 useEffect와 같이 마지막에 의존 변수를 [] 대괄호에 넣어준다. 만약 의존 변수 부분을 [] 로 비워두면 해당 변수는 다시 실행되지 않고 처음에 대입된 기존 값을 계속 사용한다.

즉, useMemo를 사용하면 리렌더링 시 연산을 매번 실행하지 않고 필요할 때만 하기에 성능을 최적화 시킬 수 있다. 성능 최적화를 위해 모든 변수에 useMemo를 사용하면 좋을 것 같지만 불필요한 성능은 오히려 역효과를 일으킬 수 있다.

 

useMemo를 사용하는 경우

• 연산 비용이 큰 계산인 경우
  • reduce나 filter, sort 등을 사용하여 배열 전체를 순회하며 특정한 값을 찾거나 정렬을 할 때
  • Object.keys나 Object.assign 등을 사용하여 객체의 key, value를 탐색하는 연산을 할 때
• 리렌더링이 빈번한 컴포넌트에서 동일한 계산이 반복되는 경우

위와 같은 경우는 useMemo로 성능을 향상시킬 수 있다.

 

useMemo사용 예시

import { useState, useMemo } from 'react'

const [searchText, setSearchText]  useState('')

const userList = useMemo(() => {
    const data = list.filter((name => name.includes(searchText))) // 검색
    return data
}, [searchText])

간단하게 구현하면 위와 같다. 사용자 목록에서 이름으로 검색을 할 때, 입력 문구인 searchText가 변경될 때 마다 검색이 되도록 한다. 이렇게 하면 컴포넌트가 리렌더링되어도 useMemo의 의존 배열인 searchText가 변경되지 않으면 userList는 재연산되지 않는다.

---

참고 사이트:

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

useMemo – React

 

https://stackoverflow.com/questions/55952847/usecallback-vs-usememo-and-when-to-use-them

useCallback vs. useMemo and when to use them

 

https://stackoverflow.com/questions/77144467/understanding-of-usememo-does-usememo-actually-memoize

Understanding of useMemo (does useMemo actually memoize?)