🔗 설치 및 서버열기

yarn 새로운 프로젝트 생성

yarn create react-app [파일명]

---

json-server

$ yarn add json-server

---

react-router-dom

$ yarn add react-router-dom

---

Axios

$ yarn add axios

---

react-query

$ yarn add react-query

---

db.json 파일에 데이터 생성하기

{
  "superheroes": [
    {
      "id": 1,
      "name": "Batman",
      "alterEgo": "Bruce Wayne"
    },
    {
      "id": 2,
      "name": "Superman",
      "alterEgo": "Clark Kent"
    },
    {
      "id": 3,
      "name": "Wonder Woman",
      "alterEgo": "Princess Diana"
    }
  ]
}

---

서버 url 뒤에 데이터 이름 넣어서 GET 요청하기

http://localhost:3001/todos

---

json-server 열기

$yarn json-server --watch db.json --port 3001

---

프론트 서버 열기

$yarn start

---

🔗 Query Client Provider

React-query 를 사용하기 위해,
root component 를 QueryClientProvider 로 감싸주고,
QueryClient 를 새롭게 만들어 변수 선언한다음,
QueryClientProvider 의 prop 으로 QueryClient 를 주입한다.

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

const queryClient = new QueryClient();

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

export default App;

React Query Tutorial 참고하며 공부한 내용입니다.