React Query 서버 상태 관리 안할거야?

React Query 완벽 가이드: 서버 상태 관리의 시작 목차 React Query란? 설치 및 설정 기본 사용법 실제 사용 예시 성능 최적화 팁 자주 묻는 질문 1. React Query란? React Query는 React 애플리케이션에서 서버 상태 관리를

Frontend·
#React#reactquery#리엑트쿼리#상태관리#서버상태관리
React Query 서버 상태 관리 안할거야?

React Query 완벽 가이드: 서버 상태 관리의 시작

목차

  1. React Query란?
  2. 설치 및 설정
  3. 기본 사용법
  4. 실제 사용 예시
  5. 성능 최적화 팁
  6. 자주 묻는 질문

1. React Query란?

React Query는 React 애플리케이션에서 서버 상태 관리를 쉽게 할 수 있게 도와주는 라이브러리입니다.

주요 특징

  • 서버 데이터 캐싱
  • 로딩/에러 상태 자동 관리
  • 페이지네이션 및 무한 스크롤 지원
  • 데이터 자동 업데이트
  • TypeScript 지원

2. 설치 및 설정

설치

npm install @tanstack/react-query
# or
yarn add @tanstack/react-query
기본 설정
typescriptCopyimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// QueryClient 인스턴스 생성
const queryClient = new QueryClient();


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

3. 기본 사용법

useQuery: 데이터 조회
typescriptCopyfunction UserProfile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => axios.get(`/api/users/${userId}`)
  });


  if (isLoading) return <div>로딩중...</div>;
  if (error) return <div>에러 발생!</div>;


  return <div>{data.name}의 프로필</div>;
}
useMutation: 데이터 변경
typescriptCopyfunction CreateUserForm() {
  const mutation = useMutation({
    mutationFn: (newUser) => axios.post('/api/users', newUser),
    onSuccess: () => {
      alert('사용자가 생성되었습니다!');
    }
  });


  const handleSubmit = (data) => {
    mutation.mutate(data);
  };


  return <form onSubmit={handleSubmit}>...</form>;
}

4. 실제 사용 예시

로그인 기능 구현
typescriptCopyfunction LoginScreen() {
  const loginMutation = useMutation({
    mutationFn: (credentials) => axios.post('/api/login', credentials),
    onSuccess: (data) => {
      // 토큰 저장
      localStorage.setItem('token', data.token);
      // 메인 페이지로 이동
      navigate('/main');
    },
    onError: (error) => {
      alert(error.message);
    }
  });


  const handleLogin = (e) => {
    e.preventDefault();
    loginMutation.mutate({
      email,
      password
    });
  };


  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit" disabled={loginMutation.isLoading}>
        {loginMutation.isLoading ? '로그인 중...' : '로그인'}
      </button>
    </form>
  );
}
무한 스크롤 구현
typescriptCopyfunction InfinitePostList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) => 
      axios.get(`/api/posts?page=${pageParam}`),
    getNextPageParam: (lastPage) => lastPage.nextPage
  });


  return (
    <div>
      {data.pages.map((page) => (
        page.posts.map((post) => (
          <PostItem key={post.id} post={post} />
        ))
      ))}
      
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? '로딩중...'
          : hasNextPage
          ? '더 보기'
          : '마지막 페이지'}
      </button>
    </div>
  );
}

5. 성능 최적화 팁

1. 적절한 캐싱 설정
typescriptCopyconst queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분
      cacheTime: 1000 * 60 * 30, // 30분
    },
  },
});
2. 선택적 데이터 가져오기
typescriptCopyconst { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUserData(userId),
  enabled: !!userId, // userId가 있을 때만 실행
});
3. 낙관적 업데이트 사용
typescriptCopyconst mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    // 이전 쿼리 취소
    await queryClient.cancelQueries(['todos']);


    // 이전 값 저장
    const previousTodos = queryClient.getQueryData(['todos']);


    // 낙관적으로 새 값 설정
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo]);


    // 롤백을 위한 컨텍스트 반환
    return { previousTodos };
  },
  onError: (err, newTodo, context) => {
    // 에러 시 롤백
    queryClient.setQueryData(['todos'], context.previousTodos);
  }
});

6. 자주 묻는 질문

Q: React Query vs Redux의 차이점은? A: Redux는 클라이언트 상태 관리에 적합하고, React Query는 서버 상태 관리에 특화되어 있습니다. 두 라이브러리는 상호 보완적으로 사용될 수 있습니다. Q: 캐시된 데이터를 수동으로 갱신하려면? A: queryClient.invalidateQueries()를 사용하여 캐시를 무효화하거나, refetch()를 호출하여 데이터를 다시 가져올 수 있습니다. Q: 오프라인 지원이 가능한가요? A: React Query는 기본적으로 오프라인 상황을 고려하여 설계되었습니다. 오프라인 상태에서도 캐시된 데이터를 사용할 수 있으며, 온라인 상태가 되면 자동으로 데이터를 동기화합니다. 마치며 React Query는 서버 상태 관리의 복잡성을 크게 줄여주는 강력한 도구입니다. 기본적인 설정만으로도 많은 기능을 제공하며, 필요에 따라 세밀한 설정도 가능합니다. 이 가이드가 React Query를 시작하는 데 도움이 되었기를 바랍니다. 더 자세한 내용은 공식 문서를 참조해주세요.

© 2026 raw