프로젝트 전, axios와 react-query 사용해보기 연습!
react-query의 세세한 설정 등이 많아서 차근차근 연습해야겠... 😅😅

---

axios와 react-query 기본 익히기

기존의 데이터 페칭에는 로딩 상태 관리 및 페칭한 데이터 관리 등을 위해 여러 hooks을 사용해야 했으나, react-query를 사용하면 훨씬 간결하게 로직을 작성할 수 있다.

✔️ 코드 비교

• ❌ as-is

• 👌 to-be

axios

✔️ 설치

• npm 사용하기:

npm install axios

✔️ 참고: 기본 사용법 ⬇️

🔹 기본 사용법 ➡️ Axios-사용법

---

react-query

✅ 기본 설정

✔️ 설치

• npm 사용하기:

npm i react-query

✔️ App.js 설정

import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

| 타입스크립트

type Group = {
  name? : string,
  age : number
}
function useGroups() {
   return useQuery<Group[], Error>('groups', fetchGroups)
 }

---

✅ Query Basics

• 쿼리는 고유키 (예시에서 todos) 에 연결된 비동기 데이터 소스 단위로 작동.
• 쿼리는 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 메서드 포함) 에 대해 사용이 가능.
  • SWR 은 GET요청

import { useQuery } from 'react-query'
 
function App() {
  const info = useQuery('todos', fetchTodoList)
}