📌소개

강의링크 바로가기

📌배운내용 정리

axios install

npm i axios // axios 설치

before axios code

// 일반적인 방식으로 fetch 하는 함수. 
// 눈에 익숙해서 그런지 보기 편하다.. ㅋㅋㅋ 
const BASE_URL = "http://127.0.0.1:8000/api/v1"

export async function getRooms() {
    const response = await fetch(`${BASE_URL}/rooms/`);
    const json = await response.json();
    return json;
}

after axios code

import axios from "axios";

const instance = axios.create({ // axios.create axios 생성 😍
    baseURL: "http://127.0.0.1:8000/api/v1/",
});

export const getRooms = () =>
    instance.get("rooms/").then((response) => response.data);
	// get 요청 (url) response.data 반환

useParams()

// filename : router.tsx
// ...생략
{
  path: "rooms/:roomPk",
    element: <RoomDetail />,
},
// ...생략
  
// filename : RoomDetail.tsx
import { useQuery } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { getRoom } from "../api";

export default function RoomDetail() {
  const { roomPk } = useParams(); // useParams() 는 파라미터 값을 변수에 담아줍니다.
  const { isLoading, data } = useQuery([`room:${roomPk}`], getRoom);
  console.log(data);
  console.log(`useParams : ${roomPk} `);
  return <h1>hello</h1>;
}

• router.tsx 파일에서 path: "rooms/:roomPk", 를 설정함으로써 url 을 통해 가변파라미터를 받도록 설정하고 실제 RoomDetail.tsx 파일에서 useParams()를 이용하여 입력된 파라미터 값을 인식합니다.

📌Grab a Keyword

axios

axios.create

get.("{url}").then((response) => response.data);

📌Grab a Key Concept

📌한줄평

axios 좋은점 아직은 잘 모르겠어 😊😆