개발 분야 (Development Area)/프론트엔드 (Frontend)

[React] React Query와 Storybook: "No QueryClient set" 오류 해결 방법

vanillinav 2025. 2. 24. 21:13
728x90
반응형

 

안녕하세요, 여러분.
로그인 페이지를 구현하는 과정에서 스토리북을 실행했을 때 다음과 같은 에러 메시지를 마주하게 되었습니다

 

에러이미지

 

이 에러는 QueryClientProvider가 설정되지 않았기 때문에 발생하는 문제입니다. 실제 애플리케이션에서는 src/main.tsx 파일에서 QueryClientProvider로 App 컴포넌트를 감싸기 때문에 문제가 되지 않지만, 스토리북에서는 컴포넌트가 QueryClientProvider로 감싸지지 않으면 React Query를 사용할 수 없습니다.

 

이제 React Query의 핵심 요소인 QueryClient와 QueryClientProvider에 대해 알아보고, 스토리북 환경에서 발생하는 이 문제를 어떻게 해결할 수 있는지 함께 살펴보겠습니다.

 

1. React Query란?

TanStack Query

 

React Query는 서버 상태 관리와 데이터 페칭을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다.
이를 활용하면 API 요청, 캐싱, 동기화, 백그라운드 업데이트 등의 기능을 효율적으로 구현할 수 있습니다.

  • 데이터를 캐싱하여 성능을 최적화할 수 있습니다.
  • 백그라운드에서 자동으로 데이터가 업데이트됩니다.
  • API 요청과 관련된 로딩 및 에러 상태를 쉽게 관리할 수 있습니다.

2. QueryClient와 QueryClientProvider란?

(1) QueryClient

QueryClient는 React Query의 상태 및 캐시를 관리하는 객체입니다.
애플리케이션 전체에서 데이터 요청, 캐싱 전략, 자동 재시도 등의 옵션을 설정하고 관리할 수 있습니다.

📌 QueryClient 생성 방법

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
});

위와 같이 staleTime을 Infinity로 설정하면, 데이터가 항상 신선하다고 간주되어 자동으로 재요청되지 않습니다.

(2) QueryClientProvider

`QueryClientProvider` 는 위에서 생성한 QueryClient 인스턴스를 React 컴포넌트 트리 전체에 제공하는 Provider 역할을 합니다.
이를 통해 하위 컴포넌트에서 useQuery, useMutation 같은 React Query의 기능을 사용할 수 있도록 합니다.

📌 QueryClientProvider로 애플리케이션 감싸기

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

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>;

이렇게 설정하면 모든 컴포넌트에서 React Query를 사용할 수 있습니다.

 

3. "No QueryClient set" 오류 해결 방법

로그인 페이지를 스토리북에서 실행할 때, QueryClientProvider가 설정되지 않아 React Query의 기능을 사용할 수 없는 문제가 발생합니다.
이를 해결하려면 스토리북 설정 파일 (LoginPage.stories.tsx) 에 QueryClientProvider를 추가해야 합니다.

(1) 오류 발생 코드 (LoginPage.stories.tsx)

import LoginPage from './LoginPage';

const meta = {
  title: "Pages/Login",
  component: LoginPage,
};

export default meta;

이 코드에서는 QueryClientProvider가 없기 때문에 오류가 발생합니다.

(2) 해결 방법: QueryClientProvider 추가

// src/pages/Login/LoginPage.stories.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import LoginPage from './LoginPage';

const queryClient = new QueryClient();

const meta = {
  title: "Pages/Login",
  component: LoginPage,
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component: '사용자 로그인을 위한 페이지 컴포넌트입니다.',
      },
    },
  },
  decorators: [
    (Story) => (
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <Story />
        </BrowserRouter>
      </QueryClientProvider>
    ),
  ],
  tags: ['autodocs'],
};

export default meta;

📌 변경된 점

✅ QueryClient 인스턴스를 생성하고,
✅ QueryClientProvider로 감싸서 컴포넌트가 정상적으로 React Query를 사용할 수 있도록 설정하였습니다.

이제 스토리북에서 로그인 페이지를 정상적으로 렌더링할 수 있습니다! 🎉

4. React Query를 활용한 데이터 페칭 예제

이제 useQuery를 사용하여 데이터를 가져오는 예제를 살펴보겠습니다.

📌 데이터 페칭 예제

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

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

function TodoList() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생: {error.message}</div>;

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

✅ useQuery(['todos'], fetchTodos)를 사용하여 데이터를 가져옵니다.
✅ isLoading, error 상태를 관리하여 로딩 중 메시지와 에러 처리를 추가했습니다.
✅ 데이터를 자동으로 캐싱하고, 백그라운드에서 최신 데이터로 업데이트됩니다.

이처럼 React Query를 활용하면 API 요청을 더욱 쉽게 관리할 수 있습니다!

5. 마무리

오늘은 React Query에서 QueryClient와 QueryClientProvider의 역할을 이해하고, 스토리북에서 발생하는 오류를 해결하는 방법을 알아보았습니다.

 

✅ QueryClient는 React Query의 상태와 캐시를 관리하는 객체입니다.
✅ QueryClientProvider는 QueryClient 인스턴스를 React 애플리케이션에 제공하는 역할을 합니다.
✅ 스토리북 환경에서 QueryClientProvider를 적용하지 않으면 "No QueryClient set" 오류가 발생할 수 있습니다.
✅ QueryClientProvider를 적용함으로써 React Query의 기능을 정상적으로 사용할 수 있도록 설정하였습니다.

 

이제 React Query를 더욱 효과적으로 활용하여 애플리케이션의 데이터 관리를 최적화해 보시길 바랍니다! 😊

 

728x90
반응형