[React] React-Query(1) - 소개 & 설치

☑️ React Query란 무엇인가?

React Query는 React 애플리케이션에서 서버 상태를 관리하는 데 도움을 주는 라이브러리이다. 여기서 '서버 상태(Server State)'란, API 호출을 통해 가져오는 데이터나 외부 서비스의 응답을 의미한다.

 

'서버 상태(Server State)' 에 대해서 설명하자면, 웹사이트에서 사용하는 상태 데이터는 크게 클라이언트 상태 데이터와 서버 상태 데이터로 두 가지로 나눌 수 있다.

(1) 클라이언트 상태 데이터는 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와 상관없이 웹 브라우저 안에서만 사용하는 데이터를 말한다면 (2) 서버 상태 데이터는 예를 들어 어떤 사이트에 접속했을 때 게시글이나 상품 등 모두 서버에서 받아오는 것을 말한다.

 

서버에서 데이터를 받아오려면 로딩 처리, 에러 상황 처리, 주기적으로 데이터 받아오기, 받아온 데이터 관리 등등 여러 가지를 고려해야 한다. 이런 상황을 해결하기 위해 리액트 쿼리가 등장하게 된 것이다.

따라서 서버 상태 관리는 클라이언트 측 상태와 다르기 때문에, React Query는 데이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해주고, 정해진 시간 혹은 조건마다 서버 상태 데이터를 최신으로 가져오는 작업도 알아서 해준다.

 

💡 즉, 리액트 쿼리는 서버 상태를 효율적으로 관리하는 데 특화된 라이브러리이고, 이를 통해 비동기 데이터 페칭을 더 간편하게 처리할 수 있다.

---

 

☑️ React Query 설치 및 기본 사용법

npm install @tanstack/react-query

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

const queryClient = new QueryClient();

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

export default App;

• QueryClient 인스턴스 생성: QueryClient는 React Query가 데이터를 관리하는 객체로, 캐시와 데이터를 처리한다.
• QueryClientProvider로 앱 감싸기: QueryClientProvider는 React Query의 QueryClient를 애플리케이션의 최상위 컴포넌트에 제공하는 역할을 한다. (Context Provider 와 동일한 역할이라고 생각하면 될 것 같다.)

 

✔️ React Query 개발자 도구(React Query Devtools)

리액트 쿼리를 사용해 개발을 할 때 편리한 개발자 도구이다.

npm install @tanstack/react-query-devtools

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

const queryClient = new QueryClient();

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

export default App;

<ReactQueryDevtools initialIsOpen={false} /> 에서 initialIsOpen은 리액트 쿼리 개발자 도구가 열려있는 채로 실행할 것인가를 선택하는 옵션이다.

 

설치하면 오른쪽 아래에 플로팅 버튼이 있고 개발자 도구 화면이 보인다.