React에서 API 응답 캐싱

이 기사에서는 API 캐싱 개념을 탐구하고, React에서 사용자 정의 캐싱 구성 요소를 만드는 과정을 논의하며, 프로세스를 간소화하는 다양한 도구 및 패키지를 살펴보겠습니다. 기본 캐싱 솔루션을 구현하든 React Query 및 SWR과 같은 고급 도구를 활용하든 이 가이드는 효율적인 API 응답 캐싱을 통해 React 애플리케이션을 최적화하는 데 필요한 통찰력과 실용적인 단계를 제공할 것입니다.

React에서 API 응답 캐싱의 이유는 무엇인가요?

API 응답 캐싱은 현대 웹 개발에서 중요한 기술로, 애플리케이션의 성능과 효율성을 크게 향상시킬 수 있습니다. 애플리케이션이 더욱 복잡해짐에 따라 외부 API에 의존하여 데이터를 가져오는 일이 증가하고, 이로 인해 효율적인 데이터 관리가 핵심 과제가 됩니다. 성능을 최적화하고 사용자 경험을 향상시키는 강력한 기술 중 하나는 API 응답 캐싱입니다. API 호출의 응답을 저장함으로써 애플리케이션은 서버 부하를 줄이고 데이터 검색 시간을 최소화하며 사용자에게 원활한 경험을 제공합니다.

사용자가 이전에 접근한 페이지를 다시 방문하는 시나리오를 상상해 보세요. 새 요청을 서버에 보내고 데이터를 다시 가져오는 것을 기다리는 대신, 애플리케이션은 저장된 응답을 거의 즉시 제공합니다. 이는 귀중한 시간을 절약할 뿐만 아니라 보다 원활하고 반응성이 뛰어난 인터페이스를 보장합니다.

사용자 정의 캐싱 구성 요소 만들기

React에서 사용자 정의 캐싱 구성 요소를 만드는 것은 데이터가 캐시되고 관리되는 방식을 정확하게 제어할 수 있게 해줍니다. 이 섹션에서는 이러한 구성 요소를 구축하는 단계별 가이드를 제공하며, 그 단점에 대해 논의합니다.

구성 요소 설정

먼저 데이터를 가져오고 캐시하는 역할을 할 기본 React 구성 요소를 설정합니다.


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

const useCustomCache = (apiUrl) => {
  const [data, setData] = useState(null);
  const [cache, setCache] = useState({});

  useEffect(() => {
    if (cache[apiUrl]) {
      setData(cache[apiUrl]);
    } else {
      fetch(apiUrl)
        .then(response => response.json())
        .then(result => {
          setCache(prevCache => ({ ...prevCache, [apiUrl]: result }));
          setData(result);
        });
    }
  }, [apiUrl, cache]);

  return data;
};

export function App(props) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const data = useCustomCache(apiUrl);

  if (!data) return <div>로딩 중...</div>;

  return (
    <div className='App'>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

상태 관리

useState 후크는 캐시된 데이터와 현재 가져오고 있는 데이터를 관리하는 데 사용됩니다. 이는 구성 요소가 캐시된 데이터를 제공할지 아니면 새 API 호출을 할지를 결정할 수 있게 해줍니다.

데이터 가져오기 및 캐싱

useEffect 후크는 네트워크 요청을 하기 전에 캐시를 확인하는 로직을 포함합니다. 데이터가 캐시에 있는 경우 바로 사용하며, 그렇지 않은 경우 fetch 요청을 하고 결과를 캐시에 저장합니다.

데이터 만료

캐시 무효화를 처리하기 위해 캐시된 데이터에 대한 TTL(유효 기간)을 설정할 수 있습니다. 이는 데이터가 주기적으로 업데이트되고 최신 상태를 유지하도록 보장합니다.

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

const useCustomCache = (apiUrl, ttl = 60000) => {
  const [data, setData] = useState(null);
  const [cache, setCache] = useState({});

  useEffect(() => {
    const cachedData = cache[apiUrl];
    if (cachedData && (Date.now() - cachedData.timestamp < ttl)) {
      setData(cachedData.data);
    } else {
      fetch(apiUrl)
        .then(response => response.json())
        .then(result => {
          setCache(prevCache => ({ ...prevCache, [apiUrl]: { data: result, timestamp: Date.now() } }));
          setData(result);
        });
    }
  }, [apiUrl, cache, ttl]);

  return data;
};

export function App(props) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const data = useCustomCache(apiUrl);

  if (!data) return <div>로딩 중...</div>;

  return (
    <div className='App'>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

사용자 정의 캐싱의 단점

사용자 정의 캐싱 구성 요소를 만드는 것은 유연성을 제공하지만, 여러 가지 단점도 함께합니다:

복잡성: 사용자 정의 캐싱 로직은 코드베이스에 상당한 복잡성을 추가하여 유지 관리 및 디버깅을 어렵게 만들 수 있습니다.
유지 관리: 애플리케이션이 발전함에 따라 캐싱 로직이 계속해서 올바르게 작동하도록 정기적인 업데이트 및 유지 관리가 필요합니다.
확장성 문제: 애플리케이션이 성장함에 따라 사용자 정의 캐싱 솔루션 관리가 점점 더 어려워져 성능 병목 현상을 일으킬 수 있습니다.

이러한 도전 과제를 이해함으로써 개발자는 사용자 정의 캐싱을 구현할 시기와 보다 고급 도구를 활용할 시기에 대한 정보에 입각한 결정을 내릴 수 있습니다.

캐싱을 위한 NPM 패키지 사용하기

NPM 패키지를 활용하면 React 애플리케이션에서 캐싱 구현을 크게 간소화할 수 있습니다. 다음은 시작하는 데 도움이 되는 몇 가지 인기 있는 패키지입니다:

axios-cache-adapter

axios-cache-adapter는 인기 있는 HTTP 클라이언트인 axios에 캐싱 기능을 통합합니다.

설치:

npm install axios axios-cache-adapter

사용법:

// 종속성 가져오기
import axios from 'axios'
import { setupCache } from 'axios-cache-adapter'

// `axios-cache-adapter` 인스턴스 만들기
const cache = setupCache({
  maxAge: 15 * 60 * 1000
})

// 새로 생성된 `cache.adapter`를 전달하는 `axios` 인스턴스 만들기
const api = axios.create({
  adapter: cache.adapter
})

// 일부 REST API에 GET 요청 보내기
api({
  url: 'http://some-rest.api/url',
  method: 'get'
}).then(async (response) => {
  // response.data로 뭔가 환상적인 작업 수행하기 \o/
  console.log('요청 응답:', response)

  // 저장소와 상호작용, `localForage` API 참조.
  const length = await cache.store.length()

  console.log('캐시 저장소 길이:', length)
})

lru-cache

lru-cache는 최근 사용한 것 중 가장 적은 것(LRU) 캐시를 구현합니다.

설치:

npm install lru-cache

사용법:

import LRU from 'lru-cache';

const cache = new LRU({ max: 100 }); // 캐시 내 최대 항목 수

const fetchData = async (url) => {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const response = await fetch(url);
  const data = await response.json();
  cache.set(url, data);
  return data;
};

idb-keyval

idb-keyval는 클라이언트 측 저장을 위한 저수준 API인 IndexedDB에 키-값 쌍을 쉽게 저장하게 해줍니다.

설치:

npm install idb-keyval

사용법:

import { get, set } from 'idb-keyval';

const fetchData = async (url) => {
  const cachedData = await get(url);
  if (cachedData) {
    return cachedData;
  }
  const response = await fetch(url);
  const data = await response.json();
  await set(url, data);
  return data;
};

이 패키지들은 React 애플리케이션에서 캐싱을 구현하는 간단한 방법을 제공하여 캐시된 데이터를 수동으로 관리하는 데 필요한 복잡성과 노력을 줄여줍니다. 이러한 도구를 사용하면 애플리케이션의 기능 개발에 더 집중하면서 효율적인 데이터 검색과 향상된 성능을 보장할 수 있습니다.

API 캐싱을 위한 고급 도구 소개

React에서 API 응답을 캐싱할 때 React Query 및 SWR과 같은 고급 도구는 사용자 정의 캐싱 메커니즘의 기능을 초월하는 강력하고 기능이 풍부한 솔루션을 제공합니다. 이러한 도구는 상태 관리를 단순화하고, 데이터 가져오기를 향상시키며, 데이터 일관성을 보장하기 위해 설계되었으며, 모든 과정에서 원활한 개발자 경험을 제공합니다.

TanStack Query

TanStack Query(구 React Query)는 서버 측 데이터를 관리하는 복잡성을 추상화하여 React 애플리케이션을 위한 강력한 데이터 가져오기 라이브러리입니다. React Query는 React 애플리케이션 내에서 서버 상태를 처리하는 방식을 변형합니다. 내장된 캐싱, 배경 업데이트, 오류 처리에 대한 즉각적인 지원을 제공하여 데이터 가져오기 로직을 관리하는 데 있어 수동으로 캐싱 및 상태 동기화를 처리할 필요성을 줄여줍니다.

사용자 정의 솔루션에 대한 이점:

단순화된 상태 관리:
React Query는 캐싱 및 상태 관리의 복잡성을 처리하여 개발자가 애플리케이션 로직에 집중할 수 있도록 합니다. 캐싱, 무효화 및 데이터 재가져오기 등의 복잡성을 추상화하여 깔끔하고 직관적인 API를 제공합니다.

자동 배경 새로 고침:
React Query는 데이터를 자동으로 배경에서 재가져와 최신 상태를 유지할 수 있습니다. 이는 애플리케이션이 항상 가장 최신 데이터를 표시할 수 있도록 하여 수동 새로 고침 트리거가 필요하지 않도록 보장합니다.

낙관적 업데이트:
낙관적 업데이트를 사용하여 React Query는 서버가 업데이트를 확인하기 전에 UI에 변경 사항을 즉시 반영할 수 있습니다. 이는 사용자 경험을 원활하고 반응성 있게 제공하며, 사용자가 자신의 행동을 즉시 확인할 수 있도록 합니다.

예시:

npm install react-query // 패키지 설치

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/users').then((res) =>
        res.json(),
      ),
  })
  console.log(data)

  if (isPending) return '로딩 중...'

  if (error) return '오류 발생: ' + error.message

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

위 코드는 공식 문서 페이지에서 가져온 것이며, 데이터 가져오기를 기본적으로 설명합니다. 위 코드에서 볼 수 있듯이 TanStack Query는 우리가 데이터를 쉽게 가져오고 쉽게 캐시할 수 있도록 합니다.

SWR (Stale-While-Revalidate)

SWR는 Vercel에서 개발한 또 다른 인기 있는 React 데이터 가져오기 라이브러리로, 단순함과 효율성을 강조합니다. "SWR"이라는 이름은 신선한 데이터를 가져오는 동안 오래된 데이터를 제공하는 캐싱 전략인 "stale-while-revalidate"의 약자입니다.

SWR은 데이터 가져오기 및 캐싱을 위한 매우 직관적인 API를 제공합니다. 이는 애플리케이션이 즉시 데이터를 표시하고(오래된 데이터), 배경에서 신선한 데이터를 가져와서 재검증함으로써 균형 잡힌 성능과 데이터 신선도를 제공합니다.

사용자 정의 솔루션에 대한 이점:

사용 용이성:
SWR의 API는 간단하고 사용하기 쉬워 모든 수준의 개발자가 접근할 수 있습니다. 데이터 가져오기, 캐싱, 동기화 및 오류 처리를 최소한의 설정으로 처리합니다.

데이터 일관성:
SWR은 애플리케이션 데이터가 항상 신선하도록 보장합니다. 배경에서 데이터를 자동으로 재검증하여 사용자에게 가장 최신 정보를 제공하며, 수동 새로 고침이 필요하지 않습니다.

오류 처리:
SWR의 내장 오류 처리 기능은 데이터 가져오기 중 오류를 쉽게 관리할 수 있도록 합니다. 데이터 가져오기 실패 시 오류 메시지 또는 대체 UI 구성 요소를 표시하는 훅을 제공합니다.

예시:

npm install swr // 패키지 설치

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default Example = () => {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const { data, error } = useSWR(apiUrl, fetcher);

  if (!data) return <div>로딩 중...</div>;
  if (error) return <div>오류: {error.message}</div>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

React Query와 SWR은 모두 React 애플리케이션에서 서버 측 데이터를 관리하기 위한 종합적인 솔루션을 제공합니다. 이들은 데이터 가져오기, 캐싱 및 동기화 프로세스를 간소화하여 사용자 정의 캐싱 로직의 필요성을 줄여주는 강력한 기능을 제공합니다. 이러한 도구를 활용하여 개발자는 애플리케이션이 효율적이고 성능이 뛰어나며 원활한 사용자 경험을 제공하도록 보장할 수 있습니다.

Apidog와 함께 작업하기

Apidog는 강력한 문서화, 자동화된 테스트 및 실시간 모니터링을 제공하여 API 보안을 향상시킵니다. Apidog는 또한 GDPR 및 HIPAA와 같은 산업 표준 준수를 지원하여 귀하의 API가 사용자 데이터를 효과적으로 보호하도록 보장합니다.

추가적으로, Apidog는 팀 협업을 지원하여 보안 중심의 개발 환경을 조성합니다. Apidog를 통합함으로써 안전하고 신뢰할 수 있으며 컴플라이언스가 준수되는 APIs를 구축하여 다양한 보안 위협으로부터 데이터와 사용자를 보호할 수 있습니다.

버튼

결론

API 응답 시간을 최적화하는 것은 현대 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 데 중요합니다. API 응답을 캐싱하면 서버 부하를 크게 줄이고 데이터 검색 속도를 개선할 수 있습니다. React에서 사용자 정의 캐싱 구성 요소를 구축하는 것은 유연성을 제공하지만, React Query 및 SWR과 같은 고급 도구를 활용하면 프로세스를 간소화하고 자동 배경 업데이트 및 오류 처리와 같은 추가 기능을 제공할 수 있습니다.

더 나아가, axios-cache-adapter, lru-cache 및 idb-keyval와 같은 NPM 패키지를 사용하면 캐싱 구현을 간소화하고 캐시된 데이터를 관리하는 데 필요한 복잡성을 줄일 수 있습니다. 포괄적인 API 관리를 위해 Apidog와 같은 도구는 API 설계, 테스트 및 모니터링을 위한 강력한 솔루션을 제공하여 개발 생애 주기 전반에 걸쳐 신뢰성과 효율성을 보장합니다.

이러한 도구와 전략을 통합함으로써, 개발자는 반응성이 뛰어나고 성능이 우수한 애플리케이션을 생성하여 원활한 사용자 경험을 제공할 수 있습니다.