React에서 Cache API 사용하기

웹 성능 최적화는 사용자 경험을 높이고, 리소스 낭비를 줄이는 데 중요한 역할을 합니다. 그중에서도 Cache API는 네트워크 요청을 효율적으로 관리하며, 정적 파일, API 응답 등의 캐싱을 가능하게 해주는 강력한 도구입니다. 특히 React 애플리케이션에서 Cache API를 활용하면 네트워크 의존성을 줄이고 빠른 로드 시간을 제공할 수 있습니다. 이번 글에서는 React와 Cache API를 통합하여 사용하는 방법과 실용적인 활용 사례를 단계별로 살펴보겠습니다.

---

1. Cache API란 무엇인가?

Cache API는 브라우저가 제공하는 저장소로, 네트워크 요청과 응답을 캐싱하고 이를 재사용할 수 있도록 설계되었습니다.
이는 Service Worker와 함께 동작하는 경우가 많지만, 단독으로도 충분히 유용하게 사용할 수 있습니다.

Cache API의 주요 특징:

• 요청과 응답을 캐싱: HTTP 요청에 대한 응답을 저장해 네트워크 요청을 줄입니다.
• 유연한 데이터 관리: 저장된 캐시를 읽고, 갱신하고, 삭제할 수 있습니다.
• 브라우저 기본 지원: 대부분의 최신 브라우저에서 기본적으로 지원됩니다.

참고: Cache API는 localStorage나 sessionStorage와는 다르게 저장 가능한 데이터 크기가 크며, URL 기반으로 데이터를 관리합니다.

---

2. React에서 Cache API를 사용하는 이유

React 애플리케이션은 종종 많은 네트워크 요청을 생성합니다.
이 중 일부 요청은 동일한 데이터를 반복적으로 가져오는 경우가 많아 네트워크 대역폭과 시간을 낭비할 수 있습니다. Cache API를 사용하면 다음과 같은 이점을 얻을 수 있습니다:

1. 성능 최적화: 동일한 데이터를 여러 번 가져오는 대신 캐시에 저장된 데이터를 활용하여 빠른 응답을 제공합니다.
2. 오프라인 지원: 네트워크가 끊겨도 이전에 캐싱된 데이터를 사용할 수 있습니다.
3. 리소스 관리: 서버와의 불필요한 통신을 줄여 비용을 절감합니다.

---

3. Cache API의 주요 메서드

React에서 Cache API를 사용하기 전에 주요 메서드를 알아두어야 합니다.

메서드 설명

caches.open(name)	주어진 이름으로 캐시를 생성하거나, 기존 캐시를 엽니다.
cache.add(request)	특정 요청을 캐시에 추가합니다.
cache.match(request)	주어진 요청과 일치하는 캐시 데이터를 검색합니다.
cache.put(request, response)	요청과 응답을 명시적으로 캐시에 저장합니다.
caches.delete(name)	특정 이름의 캐시를 삭제합니다.
caches.keys()	모든 캐시의 이름을 반환합니다.

---

4. React와 Cache API 통합하기

React 프로젝트에서 Cache API를 사용하는 기본적인 패턴은 useEffect와 함께 비동기 작업을 처리하는 것입니다.

4.1 간단한 데이터 캐싱 예제

다음은 JSON 데이터를 캐싱하고 이를 React 컴포넌트에서 사용하는 간단한 예제입니다.

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

const CACHE_NAME = "my-cache";
const API_URL = "https://jsonplaceholder.typicode.com/posts";

function CachedData() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(API_URL);

        if (cachedResponse) {
          // 캐시에서 데이터 가져오기
          const cachedData = await cachedResponse.json();
          setData(cachedData);
          setLoading(false);
          console.log("Data fetched from cache");
        } else {
          // API 요청 후 캐시에 저장
          const response = await fetch(API_URL);
          const responseData = await response.json();
          setData(responseData);
          setLoading(false);

          // 캐시에 저장
          cache.put(API_URL, response.clone());
          console.log("Data fetched from API and cached");
        }
      } catch (error) {
        console.error("Error fetching data:", error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return

Loading...

;
  }

  return (

Cached Data

{data.map((item) => (
• {item.title}
))}

  );
}

export default CachedData;

---

4.2 캐시 삭제 기능 추가하기

캐시 데이터를 수동으로 삭제할 수도 있습니다. 다음은 버튼 클릭 시 캐시를 삭제하는 예제입니다.

function ClearCacheButton() {
  const clearCache = async () => {
    try {
      await caches.delete(CACHE_NAME);
      console.log("Cache cleared successfully!");
    } catch (error) {
      console.error("Error clearing cache:", error);
    }
  };

  return <button onClick={clearCache}>Clear Cache</button>;
}

---

5. 고급 활용: Service Worker와의 통합

Cache API는 Service Worker와 함께 사용할 때 더욱 강력한 기능을 제공합니다.
예를 들어, React 애플리케이션에서 정적 파일과 API 응답을 캐싱하여 오프라인 환경에서도 동작하게 할 수 있습니다.

5.1 Service Worker 등록

public 폴더에 service-worker.js 파일을 생성하고 캐싱 로직을 추가합니다.

const CACHE_NAME = "my-app-cache";
const FILES_TO_CACHE = ["/", "/index.html", "/static/js/bundle.js"];

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(FILES_TO_CACHE);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

index.js에서 Service Worker를 등록합니다.

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js")
    .then(() => console.log("Service Worker registered"))
    .catch((error) => console.error("Service Worker registration failed:", error));
}

---

6. Cache API 사용 시 주의사항

1. 캐시 관리 정책: 오래된 캐시를 관리하거나 삭제하지 않으면 스토리지 용량 문제가 발생할 수 있습니다.
2. 보안 데이터 캐싱 금지: 민감한 데이터는 캐싱하지 말아야 하며, 반드시 HTTPS를 통해 통신해야 합니다.
3. 최신 데이터와의 동기화: 캐시된 데이터가 오래될 수 있으므로 적절히 갱신하는 로직을 구현해야 합니다.

---

결론

React에서 Cache API를 활용하면 성능 최적화와 사용자 경험 향상에 큰 도움을 줄 수 있습니다. 이번 글에서는 Cache API의 기본적인 사용법부터 React 프로젝트에 통합하는 방법, 그리고 고급 활용 사례까지 다뤄보았습니다. 적절한 캐시 전략을 세우고 관리한다면 더 빠르고 효율적인 React 애플리케이션을 만들 수 있을 것입니다.

이제 여러분의 프로젝트에서 Cache API를 직접 활용해 보세요! 🚀