useMemo 의존성 배열 값이 같으면 계산 함수가 실제로 덜 실행되는지 console.count로 확인하기

왜 이 내용을 정리하나

React 컴포넌트는 state나 props가 바뀔 때마다 함수 본문 전체를 다시 실행한다. 그래서 목록 필터링이나 정렬처럼 무거운 계산이 렌더링마다 반복되면 입력 타이핑이 버벅이는 현상이 생긴다. 이때 useMemo를 쓰면 계산 결과를 캐시해 두고 재사용할 수 있다고 알려져 있다. 하지만 의존성 배열의 값이 같을 때 정말 계산 함수가 실행되지 않는지는 코드로 확인하지 않으면 감으로만 남는다. 이 노트에서는 console.count로 실행 횟수를 세어 보고, 의존성 값이 같을 때와 다를 때의 차이를 정리해 본다.

개념 설명

useMemo(factory, deps)는 두 인자를 받는다. factory는 값을 계산하는 함수이고, deps는 그 계산이 의존하는 값들의 배열이다. React는 이전 렌더링에서 저장한 deps와 현재 deps를 Object.is 비교로 확인한다. 모든 항목이 같으면 이전에 저장한 결과를 그대로 돌려주고, factory는 호출하지 않는다. 하나라도 다르면 factory를 다시 실행하고 새 결과를 저장한다.

여기서 중요한 점은 비교가 얕게(shallow) 이루어진다는 것이다. 객체나 배열을 deps에 넣으면 내용이 같아도 참조가 새로 만들어지면 다른 값으로 취급된다. 그래서 렌더링마다 새로 만든 객체를 deps에 넣으면 메모이제이션이 매번 무효화된다.

코드 예제

아래 코드는 부모 컴포넌트에서 query와 count 두 state를 가진다. count를 바꿔도 query는 그대로이므로, 의존성을 [query]로 둔 useMemo는 계산을 건너뛰어야 한다. console.count는 호출될 때마다 라벨별 누적 횟수를 콘솔에 출력한다.

import { useState, useMemo } from 'react';

const items = ['apple', 'banana', 'cherry', 'date', 'grape', 'lemon'];

function filterItems(list, keyword) {
  console.count('filterItems 실행');
  return list.filter((item) => item.includes(keyword));
}

export default function SearchDemo() {
  const [query, setQuery] = useState('a');
  const [count, setCount] = useState(0);

  const filtered = useMemo(() => filterItems(items, query), [query]);

  return (

setQuery(e.target.value)} />

{filtered.map((item) => (
• {item}
))}

  );
}

이 코드에서 버튼을 눌러 count만 바꾸면 컴포넌트는 다시 렌더링되지만, deps인 query는 변하지 않는다. 따라서 콘솔에는 'filterItems 실행'이 처음 한 번만 찍히고 이후 버튼 클릭에서는 늘어나지 않는다. 입력창에 글자를 하나 치면 query가 바뀌므로 카운터가 한 번 올라간다. 반대로 useMemo를 제거하고 filterItems를 그냥 호출하면, 버튼을 누를 때마다 카운터가 함께 올라가는 것을 확인할 수 있다.

헷갈리는 점

첫째, 의존성 배열을 생략하면 useMemo는 매 렌더링마다 실행된다. 빈 배열 []을 주면 마운트 시 한 번만 실행된다. 이 차이를 모르고 빈 배열을 쓰면 나중에 바뀐 값이 반영되지 않는 버그가 생긴다.

둘째, 렌더링이 실행되었다고 해서 factory가 실행된 것은 아니다. 컴포넌트 함수 본문은 count가 바뀔 때마다 다시 돌지만, console.count가 factory 안에 있으면 그 횟수만 따로 셀 수 있다. 그래서 측정 위치를 factory 안으로 정해야 한다.

셋째, React 18의 StrictMode는 개발 환경에서 렌더링을 두 번 호출하므로 카운터가 예상보다 두 배로 찍힐 수 있다. 측정할 때는 StrictMode를 끄거나, 증가 폭을 기준으로 해석해야 한다.

정리

useMemo는 deps의 값이 Object.is 기준으로 같으면 factory를 건너뛰고 이전 결과를 재사용한다. console.count를 factory 안에 넣으면 실행 횟수가 실제로 줄어드는지 확인할 수 있고, 위 예제에서는 count 변경 시 카운터가 올라가지 않았다. 객체를 deps에 넣을 때 참조가 매번 바뀌는 문제와 StrictMode의 이중 호출도 함께 고려해야 한다. 이 노트에서는 측정 방법과 결과 해석의 기준을 정리해 보았다.

#React #useMemo #메모이제이션 #console.count #성능최적화