React-Query 사용법

React-Query를 이용해서 데이터를 쉽고 효율적이게 관리해보자.

클라이언트 생성

import { createRoot } from 'react-dom/client'
import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query"
import './index.css'
import App from './App.tsx'

const queryClient = new QueryClient(); 

createRoot(document.getElementById('root')!).render(
	<QueryClientProvider client={queryClient}>
			<App />
	</QueryClientProvider>
)

• 리액트 쿼리는 리액트의 루트 파일에서 쿼리 클라이언트를 세팅해야 한다.
• queryClient를 new 키워드를 사용해 생성하고, 리액트 쿼리에서 지원하는 Provider 컴포넌트로 App을 감싸주면 된다.

비동기 함수 생성

export const authPost = async (
	accessToken: string | null,
	url: string,
	data: signInType
): Promise<any> => {
	try {
		const response = await CommonAPI.post(url, data, {
			headers: {
				Authorization: `Bearer ${accessToken}`,
			},
		})

		return response.data
	} catch (error) {
		console.error('POST Error: ', error)
		throw error
	}
}

• 지정된 URL로 Post 요청을 할 수 있도록 구현한다.

useMutation 사용

useMutation이란?
useQuery로 정의한 데이터를 update,delete해주는 리액트 쿼리 훅

import { useMutation } from '@tanstack/react-query'
import { userPost } from '~/api'
import type { signUpType } from '~/types'

export const useAuth = () => {
	const signUpMutation = useMutation({
		mutationFn: async (data: signUpType) => {
			const response = await userPost(null, '/user/signup', data)
			return response
		},
	})

	return {
		signUp: signUpMutation,
	}
}

• mutationFn은 비동기 작업을 수행해주기 때문에 필수적으로 사용을 해야한다.

mutate, isPending

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '~/hooks'
import type { signUpType } from '~/types'

const SignUp = () => {
	const [signupData, setSignupData] = useState<signUpType>({
		username: '',
		password: '',
	})

	const navigate = useNavigate()
	const { signUp } = useAuth()
	const { mutate, isPending } = signUp

	const handleSubmit = () => {
		if (isPending || !signupData.username.trim() || !signupData.password.trim())
			return

		mutate(signupData, {
			onSuccess: () => {
				alert('회원가입에 성공하셨습니다!')
				navigate('/')
			}, // 성공하였을 때 처리
			onError: error => {
				console.log(error)
			}, // 실패하였을 때 처리
		})
	}

export default SignUp

• mutate를 통해서 이벤트가 발생되었을 때 값을 useMutation에 저장해줄 수 있다.
• isPending은 loading이라 생각하면 편하다.