Pre-Project #2 | React-Query(TanStack-Query) 기초 개념 자료

HyeonWooGa·2022년 10월 31일

FE파트장 pre-project 기술핏 협업

Pre-Project

목록 보기

3/3

FE 파트장으로써 FE 팀원 기술핏을 맞추기 위한 기술 기초 개념 자료 작성

개요

프리-프로젝트에서 사용될 React-Query 에 익숙해지기 위함입니다.
- React-Query 의 다양한 활용 중 데이터 캐싱만 사용해봅니다.
실제 프로젝트와 동작 및 구현 방법이 다를 수 있습니다.

기술 목표

React-Query Hooks useQuery Hook 에 익숙해집니다.
QueryClientProvider 컴포넌트와 QueryClient 의 개념을 이해합니다.

구현 목표

React-Query 를 이용해 비동기 데이터를 캐싱하여 관리합니다.

React-Query 기초

QueryClient

개념

React-Query 의 기능을 사용하는 컴포넌트들의 부모 컴포넌트로 QueryClientProvider 가 있어야합니다.
QueryClient 는 Context API 를 활용하여 캐싱된 데이터를 전역 상태와 비슷하게 관리해줍니다.

구현

// ~/src/App.js

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

const queryClient = new QueryClient();

function App() {
  <QueryClientProvider client={queryClient}>
    <List />
  </QueryClientProvider>
}

React-Query Hooks

개념

React-Query 에서도 Hooks 를 제공하고 기본적인 Hook 으로 useQuery 를 사용하면 됩니다.
- useQuery(쿼리키배열, 쿼리함수, 옵션들(옵셔널))

구현

기초적인useQuery 사용법
- Query Keys 정의 : 변수/상태 이름 정의와 비슷
- Query Function : 비동기 데이터 Fetching 함수 ex) fetch, aixos 사용

// ~src/components/List.js

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

function List() {
  const { data: posts, isInitialLoading } = useQuery(['posts'], () => axios.get('https://koreanjson.com/posts'));
  // ES6 문법 data: posts - data 에 해당하는 값을 변수이름 posts 에 할당합니다.

  console.log(posts?.data);
  // 비동기이기 때문에 데이터 fetching 완료 전까지 posts 는 null 값이라 ? 키워드를 사용합니다.

  return (
    <div>
      {/* isInitialLoading 이 데이터 Fetching 완료 전까지 true 였다가 완료 후 false 로 할당 됩니다. */}
      {isInitialLoading ? (
        <h1>Loading...</h1>
      ) : (
        <ul>
          {posts?.data.slice(0, 30).map((item) => (
            <li>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

추가적인useQuery 사용법 (with 전역상태관리, Recoil)
- React-Query 자체가 비동기 데이터를 전역상태와 같이 관리하기 때문에 대부분 필요하지 않지만 특정 이유로 전역상태관리와 함께 사용할 수도 있습니다.

// ~src/components/List.js

import React from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { useRecoilState } from 'recoil';
import { postsAtom } from '../atoms';

function List() {
  const [ posts, setPosts ] = useRecoilState(postsAtom);

  const { isInitialLoading } = useQuery(
    ['posts'], 
    () => axios.get('https://koreanjson.com/posts'),
    {
      onSuccess: res => {
        setPosts(res.data);
      }
    }
  );
  // ES6 문법 data: posts - data 에 해당하는 값을 변수이름 posts 에 할당합니다.

  return (
    <div>
      {/* isInitialLoading 이 데이터 Fetching 완료 전까지 true 였다가 완료 후 false 로 할당 됩니다. */}
      {isInitialLoading ? (
        <h1>Loading...</h1>
      ) : (
        <ul>
          {posts?.data.slice(0, 30).map((item) => (
            <li>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}