axios instance로 써보기

 

pre-project를 하면서 서버에서 데이터를 받아올 때마다 axios로 받아왔다. 

이번 main-project를 시작하면서 멘토님을 새로 만났는데 axios를 instance로 쓰는 방법을 공부해보라고 숙제를 내주셨다. 

 

axios를 instance로 쓰면 좋은 점이 구성 기본값 설정을 쉽게 해준다는 장점이 있다. 

그리고 instance가 interceptor 처리를 하도록 설정할 수 있다는 장점이 있다. 

 

우선 여기서는 구성 기본값 설정을 쉽게 해주는 코드를 살펴보자!

 

 

1. axios를 instance로 안쓰는 방법

import {useEffect, useState} from 'react';
import axios from "axios";

export default function App() => {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    const getPosts = () => {
      axios
      .get(`https://jsonplaceholder.typecode.com/posts`)
      .then((r) => setPosts(r?.data))
      .catch((err) => console.log(err))
    };
    
    getPosts();
  },[]);
  
  return (
  <div className='App'>
  	<h1>Axios Instance</h1>
    <div>
    	{posts?.map((p) => (
  			<p>{p.title}</p>))}
    </div>
  </div>
  )
}

 

 

2. axios를 instance로 쓰는 방법

import {useEffect, useState} from 'react';
import axios from "axios";

const client = axios.create({
  baseURL:`https://jsonplaceholder.typecode.com`
  headers:{
  	authorName:'hailie'
}
});

export default function App() => {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    const getPosts = () => {
      axios
      .get(`/posts`)
      .then((r) => setPosts(r?.data))
      .catch((err) => console.log(err))
    };
    
    getPosts();
  },[]);
  
  return (
  <div className='App'>
  	<h1>Axios Instance</h1>
    <div>
    	{posts?.map((p) => (
  			<p>{p.title}</p>))}
    </div>
  </div>
  )
}

 

 

 

참고)

https://pinokio0702.tistory.com/373

[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법

https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1

API | Axios 러닝 가이드

https://youtu.be/VHJ-VD1LOFw