[ 스파르타 / TIL ] 내일배움캠프 #50

오늘 한 것

---

• DongNaeBook 프로젝트 구상 및 UI 디자인 구상

 

오늘의 배움

---

프로젝트에 react-query 설치 방법

---

npm install react-query

 

Create qury client (쿼리 클라이언트)

---

• 쿼리와 서버의 데이터 개시를 관리하는 클라이언트이다.
• 자녀 컴포넌트에 캐시와 클라이언트 구성을 제공할 QueryProvide를 적용해야 한다.
• 서버에서 데이터를 가져오기 위해 useQuery 훅을 실행해야 한다.
  • useQuery - Data를 Get 하기 위한 기능이다.
  • 서버에서 데이터를 가져오는 훅이다.

 

리액트 쿼리 프로젝트에 적용하기

---

• import {QueryClient, QueryClientProvider} from "react-query";
• client가 있으니 이제 provider을 추가할 수 있다.
  • 클라이언트가 가지고 있는 캐시와 모든 기본 옵션을 공급자의 자녀 컴포넌트도 사용할 수 있게 된다.

  import { Posts } from "./Posts";
  import "./App.css";
  
  import {QueryClient, QueryClientProvider} from "react-query";
  
  // 클라이언트 추가
  const  queryClient = new QueryClient();
  
  function App() {
    return (
      // provide React Query client to App
      <div className="App">
        <h1>Blog Posts</h1>
        <Posts />
      </div>
    );
  }
  
  export default App;
  

   

 

이제 React Query hook을 사용할 수 있다.

import { Posts } from './Posts';
import './App.css';

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

const queryClient = new QueryClient();

function App() {
  return (
    // provide React Query client to App
		// 아래 코드 선언해줌, Posts에 훅을 사용하려고 한다.
    <QueryClientProvider client={queryClient}>
      <div className='App'>
        <h1>Blog Posts</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
}

export default App;