서버 데이터 통신과 캐싱: API 연동 실습부터 TanStack Query까지

📊 API 연동 실습: 외부 REST API를 활용한 데이터 대시보드 만들기

실전 API 데이터 연동 패턴

지금까지 배운 useState, useEffect, 비동기 fetch/axios를 총동원하여 실제 외부 API와 통신하고 데이터를 화면에 뿌려주는 과정을 실습합니다.

안정적인 데이터 페칭의 3요소

사용자 경험(UX)을 위해서는 데이터를 가져올 때 발생할 수 있는 3가지 상태를 반드시 모두 처리해야 합니다.

로딩 상태 (Loading): 스켈레톤이나 스피너를 보여주어 앱이 멈추지 않았음을 알림
성공 상태 (Success): 받아온 데이터를 바탕으로 UI 렌더링
실패 상태 (Error): 네트워크 오류나 서버 장애 시 에러 메시지와 재시도 버튼 제공

import CryptoDashboard from './CryptoDashboard';

export default function App() {
  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <CryptoDashboard />
    </div>
  );
}

실행 결과

서버 상태(Server State) 관리의 종결자, TanStack Query

서버에서 데이터를 가져오기 위해 useState와 useEffect를 조합하면 앞서 배운 로딩 상태 관리, 에러 처리, 캐싱, 데이터 재요청 등 복잡한 코드를 직접 다 짜야 합니다. 클라이언트 상태(UI 토글 등)와 서버 상태(DB 데이터)를 분리하는 것이 모던 프론트엔드의 핵심 트렌드입니다.

TanStack Query (구 React Query)는 API 데이터를 훅 한 줄로 가져오고, 알아서 캐싱하며, 백그라운드에서 최신 데이터로 동기화(Stale-while-revalidate)해주는 강력한 라이브러리입니다.

Stale-While-Revalidate 캐싱 생명주기

Stale-while-revalidate 원리:

사용자가 페이지를 열면, 오래된(Stale) 캐시 데이터라도 먼저 즉시 화면에 렌더링합니다. (로딩 스피너 없음!)
동시에 백그라운드에서 서버로 새로운 데이터를 몰래 요청합니다.
서버에서 최신 데이터(Fresh)가 도착하면, 캐시를 업데이트하고 UI를 부드럽게(조용히) 갱신합니다.

Terminal

bash - Terminal

npm install @tanstack/react-query

위 명령어로 React Query를 설치한 뒤, 아래와 같이 QueryClient를 세팅하여 사용할 수 있습니다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import TodoList from './TodoList';

// 1. QueryClient 인스턴스 생성
const queryClient = new QueryClient();

export default function App() {
  // 최상단에 Provider를 세팅합니다.
  return (
    <QueryClientProvider client={queryClient}>
      <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
        <h3 style={{ marginTop: 0 }}>TanStack Query 예제</h3>
        <TodoList />
      </div>
    </QueryClientProvider>
  );
}

실행 결과