React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교

React에서 연산 비용이 크거나 불필요하게 반복될 수 있는 계산은 useMemo를 통해 최적화할 수 있다. 이 글에서는 useMemo를 사용한 코드와 사용하지 않은 코드를 직접 비교하면서 어떤 차이가 있는지 명확하게 설명한다.

예제 시나리오: 완료된 작업 수 계산하기

🔸 useMemo를 사용하지 않은 경우

function TodoStats({ todos }) {
  const doneCount = todos.filter((todo) => todo.isDone).length;
  console.log("✅ 계산됨");

  return <div>완료된 항목: {doneCount}</div>;
}

이 코드는 todos 외의 다른 상태 변경이 있어도, 예를 들어 검색어 입력 등으로 렌더링이 발생하면 doneCount 계산이 매번 실행된다.

---

🔹 useMemo를 사용한 경우

import { useMemo } from "react";

function TodoStats({ todos }) {
  const doneCount = useMemo(() => {
    console.log("✅ 계산됨 (useMemo)");
    return todos.filter((todo) => todo.isDone).length;
  }, [todos]);

  return <div>완료된 항목: {doneCount}</div>;
}

이 코드는 todos가 바뀌었을 때만 doneCount를 다시 계산한다. 즉, 불필요한 상태 변화에는 계산을 생략하고 이전 값을 재사용한다.

---

차이점 요약

항목useMemo 사용 XuseMemo 사용 O

계산 조건	매 렌더링마다 계산	의존성(todos) 변경 시에만 계산
성능	불필요한 연산 발생	연산 최소화 가능
코드 명확성	계산이 항상 실행됨	계산 조건을 명확히 드러냄

---

언제 useMemo를 사용하는 것이 좋을까?

• 계산 비용이 큰 작업 (ex. 배열 순회, 정렬, 필터링 등)
• 컴포넌트가 자주 렌더링되는 구조일 때
• 동일한 입력에 대해 동일한 결과가 예상될 때 (순수 함수)

단, 모든 계산에 useMemo를 남용하면 오히려 가독성을 해칠 수 있으므로, 성능에 민감한 부분만 선택적으로 적용하는 것이 좋다.

---

결론

useMemo는 React 컴포넌트에서 불필요한 연산을 방지하고 성능을 최적화할 수 있는 유용한 도구다. 리스트 필터링, 통계 계산처럼 연산량이 커질 수 있는 경우라면, 꼭 한 번 useMemo 적용을 고려해보자.