[Dseok의 코딩스터디] React.js useMemo 한방에 끝내기 | 개념 & 실전 예제 7가지

📌 useMemo란?

React의 useMemo는 컴포넌트가 리렌더링될 때 불필요한 연산을 방지하고 성능을 최적화하는 Hook입니다. 비싼 연산(heavy computation)이나 의존성이 변경되지 않는 데이터를 메모이제이션(memoization)하여 저장하고, 불필요한 재계산을 방지합니다.

✅ 기본 문법

import { useMemo } from "react";

function Component({ value }) {
  const computedValue = useMemo(() => {
    return value * 2; // 계산된 값 저장
  }, [value]);
  
  return <div>계산된 값: {computedValue}</div>;
}

• useMemo(() => { 연산 }, [의존성]) → 의존성이 변경될 때만 연산 수행
• 컴포넌트가 리렌더링될 때마다 불필요한 재계산을 방지

📌 useMemo의 주요 활용 사례

1. 복잡한 연산 결과를 메모이제이션
2. 렌더링 성능 최적화 (불필요한 재계산 방지)
3. 이전 값과 현재 값 비교
4. React 컴포넌트의 성능 향상
5. 의존성 배열을 활용한 조건부 연산
6. API 호출 결과 캐싱
7. 컴포넌트 내 리스트 필터링 최적화
8. 데이터 정렬 성능 개선

📌 useMemo 실전 예제 8가지

1️⃣ 비싼 연산 최적화하기

import { useState, useMemo } from "react";

function ExpensiveCalculation() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(100);

  const expensiveResult = useMemo(() => {
    console.log("비싼 연산 수행...");
    return value ** 2;
  }, [value]);

  return (
    <div>
      <h1>계산 결과: {expensiveResult}</h1>
      <button onClick={() => setCount(count + 1)}>카운트 증가 ({count})</button>
      <button onClick={() => setValue(value + 1)}>값 변경 ({value})</button>
    </div>
  );
}

✅ 설명: useMemo를 사용하여 value가 변경될 때만 비싼 연산이 실행되도록 최적화함.

 

 

2️⃣ API 데이터 가공 최적화

import { useState, useEffect, useMemo } from "react";

function OptimizedDataFetching() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  const filteredUsers = useMemo(() => users.filter(user => user.name.length > 10), [users]);

  return (
    <ul>
      {filteredUsers.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

 

✅ 설명: useMemo를 사용하여 API 데이터를 가공할 때 불필요한 필터링을 방지.

 

3️⃣ useRef, useState, useMemo 함께 활용하기

import { useState, useMemo, useRef } from "react";

function UseMemoWithRef() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  const isEven = useMemo(() => count % 2 === 0, [count]);

  return (
    <div>
      <h1>현재 값: {count}</h1>
      <h2>{isEven ? "짝수" : "홀수"}</h2>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

✅ 설명: useRef, useState, useMemo를 함께 사용하여 이전 값을 저장하고 불필요한 계산을 방지.

 

4️⃣ React 컴포넌트의 성능 향상

import { useMemo } from "react";

function HeavyComponent({ items }) {
  const sortedItems = useMemo(() => {
    return [...items].sort();
  }, [items]);

  return (
    <ul>
      {sortedItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

✅ 설명: useMemo를 사용하여 리스트가 변경될 때만 정렬 로직을 실행하여 성능 최적화.

 

5️⃣ API 호출 결과 캐싱

import { useState, useEffect, useMemo } from "react";

function CachedAPIComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  const topPosts = useMemo(() => data.slice(0, 5), [data]);

  return (
    <div>
      <h2>Top 5 Posts</h2>
      {topPosts.map(post => <p key={post.id}>{post.title}</p>)}
    </div>
  );
}

 

✅ 설명: useMemo를 사용하여 API에서 가져온 데이터를 캐싱하고 불필요한 재계산 방지.

 

6️⃣ 컴포넌트 내 리스트 필터링 최적화

import { useState, useMemo } from "react";

function FilteredList() {
  const [query, setQuery] = useState("");
  const items = ["React", "Vue", "Angular", "Svelte"];

  const filteredItems = useMemo(() => {
    return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
  }, [query]);

  return (
    <div>
      <input type="text" onChange={(e) => setQuery(e.target.value)} placeholder="검색어 입력" />
      <ul>
        {filteredItems.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

✅ 설명: useMemo를 사용하여 리스트 필터링을 최적화.

 

7️⃣ 데이터 정렬 성능 개선

import { useMemo } from "react";

function SortedData({ data }) {
  const sortedData = useMemo(() => {
    return [...data].sort((a, b) => a.name.localeCompare(b.name));
  }, [data]);

  return (
    <ul>
      {sortedData.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

✅ 설명: useMemo를 사용하여 데이터 정렬을 최적화하여 불필요한 정렬 연산 방지.

📌 마무리 🎯

🔑 useMemo 핵심 정리

• 불필요한 연산을 방지하여 성능 최적화
• 의존성 배열을 설정하여 특정 값이 변경될 때만 연산 수행
• 비싼 연산(heavy computation) 처리 시 유용
• 데이터 필터링, 정렬, 계산 등에 사용 가능
• React 테이블, API 데이터 최적화에 필수