React/React Core

15.React Query로 서버 상태 관리하기: 효율적인 데이터 페칭과 캐싱

코딩쉐프 2024. 12. 2. 23:54
728x90

"React Query로 서버 상태 관리하기: 효율적인 데이터 페칭과 캐싱"

1시간 분량 강의안 (React Query 기초)

강의 목표

  1. React Query의 개념과 필요성을 이해한다.
  2. React Query의 주요 기능(데이터 페칭, 캐싱, 뮤테이션)을 학습한다.
  3. React Query를 활용한 서버 상태 관리 방법을 실습한다.

강의 목차

1. React Query란 무엇인가? (10분)

React Query의 정의

  • React Query는 React 애플리케이션에서 서버 상태를 관리하고 데이터 페칭과 캐싱을 간단하게 만들어주는 라이브러리입니다.

React Query의 주요 특징

  1. 데이터 동기화: 클라이언트와 서버 간의 데이터를 동기화.
  2. 자동 캐싱: 데이터가 변경되지 않으면 캐시된 데이터를 사용하여 네트워크 요청 감소.
  3. 리트라이와 리페치: 실패한 요청을 자동으로 재시도하거나, 데이터가 오래된 경우 자동으로 새로고침.
  4. 개발자 도구: 상태 디버깅을 위한 React Query Devtools 제공.

React Query의 주요 구성 요소

  1. Query: 데이터를 가져오는 작업.
  2. Mutation: 데이터를 생성, 수정, 삭제하는 작업.
  3. Query Client: React Query의 중앙 관리 객체.

2. React Query 설치 및 기본 설정 (10분)

1단계: React Query 설치

npm install @tanstack/react-query

2단계: Query Client 설정

  • 애플리케이션의 최상위 컴포넌트에 Query Client를 설정합니다.
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

export default Root;

3. React Query 주요 기능 및 구현 (20분)

1단계: 데이터 페칭(Query)

  • 서버에서 데이터를 가져오는 기본 예제:
import React from 'react';
import { useQuery } from '@tanstack/react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then((res) =>
    res.json()
  );
}

function Posts() {
  // 수정된 useQuery 형태 (단일 객체 사용)
  const { data, isLoading, isError } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error fetching data.</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;

 

App.js

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Posts from './Posts'; // default export 확인

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <h1>React Query Example - Posts</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
}

export default App;

2단계: 데이터 뮤테이션(Mutation)

  • 데이터를 생성, 수정, 삭제하는 작업:
//CreatePost.js
import React from 'react';
import { useMutation } from '@tanstack/react-query';

function createPost(newPost) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newPost),
  }).then((res) => res.json());
}

function CreatePost() {
  // 수정된 useMutation 형태 (단일 객체 사용)
  const mutation = useMutation({
    mutationFn: createPost,
  });

  const handleCreate = () => {
    mutation.mutate({ title: 'New Post', body: 'This is a new post.' });
  };

  return (
    <div>
      <button onClick={handleCreate}>Create Post</button>
      {mutation.isLoading && <p>Creating post...</p>}
      {mutation.isSuccess && <p>Post created!</p>}
      {mutation.isError && <p>Error creating post!</p>}
    </div>
  );
}

export default CreatePost;

3단계: 캐싱 및 리페치

  • 캐싱된 데이터를 사용하는 경우:
     
const { data } = useQuery(['posts'], fetchPosts, {
  staleTime: 5000, // 데이터가 5초 동안 신선한 상태로 유지
});

4. React Query Devtools 사용 (5분)

설치

npm install @tanstack/react-query-devtools

사용

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

5. 실습 과제 (10분)

실습 과제

  1. 서버에서 데이터를 페칭하여 화면에 표시하세요.
  2. 데이터를 생성하거나 수정하는 버튼을 구현하세요.
  3. React Query Devtools를 사용하여 상태를 확인하세요.

6. Q&A 및 정리 (10분)

  • Q&A:
    1. React Query와 Redux의 차이점은 무엇인가요?
    2. React Query는 어떤 상황에서 적합한 상태 관리 도구인가요?
  • 요약:
    • React Query는 서버 상태를 간단하게 관리하고, 데이터 페칭 및 캐싱을 효율적으로 처리할 수 있습니다.
    • Query와 Mutation을 활용하여 다양한 서버 작업을 처리할 수 있습니다.
    • React Query Devtools로 상태를 시각적으로 디버깅할 수 있습니다.
728x90