리액트 쿼리 (4)

Homepage : 일반적인 페이지

React Query : 리액트 쿼리 실험 페이지

 

페이지 2개 만들기 : React Router Dom 사용!

 

 

<index.js> (원본)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
const queryClient = new QueryClient();
root.render(
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
    <App />
    </BrowserRouter>
    <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-right' />
  </QueryClientProvider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

<ReactQueryPage.jsx> 초기 화면 (원본)

import React from "react";

const ReactQueryPage = () => {
    return <div>ReactQueryPag</div>
};

export default ReactQueryPage;

<App.js> (원본)

import logo from './logo.svg';
import './App.css';
import { Routes, Route, Link } from "react-router-dom";
import HomePage from "./HomePage";
import ReactQueryPage from "./ReactQueryPage";

function App() {
  return (
    <div className="App">
      <nav style={{ backgroundColor: "beige", padding: "20px" }}>
        <Link to="/" style={{ marginRight: "10px" }}>
          HomePage
        </Link>
        <Link to="/react-query">React Query</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/react-query" element={<ReactQueryPage />} />
      </Routes>
    </div>
  );
}

 

 

nav(navigation) 바

Route(r) 2개

 

지정함!!!

 

이제 API 호출하는 것을 해보자!

초기화면

여기서 잠깐!

 

 

axios를 다운받는다!(설치한다!)

useQuery 훅 : 하나의 매개변수를 갖게 되는데 매개변수의 타입은 객체(Object)타입이다.

queryKey:배열을 값으로 받는다. - API 호출 각각의 (쿼리의) unique한 이름을 지정해준다. 그 이름을 기준으로 가져오기도 하는 등 데이터를 관리한다.

queryKey : ['posts'] --> 이름정해주고

posts : 모든 post를 가져온다.라는 의미의 이름

queryFn: 함수를 넣어준다. 내가 호출하고 싶은 API.

queryFn : fetchPost -> fetchPost라는 함수(를 넣어준다)

queryFn : fetchPost - -> 무슨 API를 호출할지 딱 정해주면 useQuery가 알아서 부르게(?)된다.

 

useQuery라는 훅이 어떤 값을 return해주느냐?

data : 내가 API 호출을 통해 받은 데이터

데이터가 제대로 생성되었는지 console.log를 해보자

 

에러 1  https://smartpoint02.tistory.com/130

에러 2  https://smartpoint02.tistory.com/131

 

<최종 ReactQueryPage.jsx>

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

const ReactQueryPage = () => {
    const fetchPost = () => {
        return axios.get("http://localhost:3004/posts);")
    };
    const { data } = useQuery({
        queryKey : ["posts"],
        queryFn: fetchPost,
    });
    console.log("ddd", data);
    return <div>ReactQueryPag</div>
};

export default ReactQueryPage;

<최종 정상 작동 결과 화면>

 

처음에는 undefined : 왜냐하면 지금 호출하는 중이니까 아직 받은게 없다.

그 다음(줄)에는 받은 데이터가 나오게 된다. (ddd)

 

data 가 필요함

우리가 필요한 (data)값들을 볼 수 잇다.