axios 모듈화하기

프론트랑 백엔드단에서 데이터를 가져올 때 axios모듈을 많이 사용한다. 그런데 axios를 쓰게 되면, url을 사용해서 데이터를 가져오고 넘겨주고 해야 한다. 만약 url이 같다면 똑같은 코드를 계속적으로 쓰게 된다. axios를 모듈화하여 사용하면 코드를 한결 덜 길게 사용할 수 있다.

axios 기본 코드

import axios from 'axios';
function Other() {
const [data, setData] = useState([]);
  useEffect(() => {
  useEffect(() => {
    axios.get("<http://localhost:8000/api/todo/>").then((res) => setData(res.data));
  }, []);

  return (
    <div style={{height: '300vh'}}>
			<ScrollProgress />
	    <p>{JSON.stringify(data.userId)}</p>
    </div>
  )
}

export default Other;

axios 모듈화하여 사용하기

1) customAxios 파일 만들기

import axios from "axios";

export const customAxios = axios.create({
  baseURL: "<https://jsonplaceholder.typicode.com/posts/1>",
});

반응형

customAxios.js파일 만들어주고 위와 같은 코드를 추가해주었다.

• baseURL : 통신하고자 하는 서버의 url이다.

2) customAxios 사용하기

import React, {useState, useEffect} from 'react';
import ScrollProgress from './ScrollProgress'
import {customAxios} from '../../customAxios'

function Other() {
  const [data, setData] = useState([]);
  useEffect(() => {
    customAxios.get('')
    .then((res)=> setData(res.data))
  }, []);

  return (
    <div style={{height: '300vh'}}>
			<ScrollProgress />
	    <p>{JSON.stringify(data.body)}</p>
	    <p>{JSON.stringify(data.id)}</p>
	    <p>{JSON.stringify(data.title)}</p>
	    <p>{JSON.stringify(data.userId)}</p>
    </div>
  )
}

export default Other

위의 코드에서는 get만 썼지만 post, patch등을 쓸 때 더 활용이 가능하다. 그러면 코드가 더 간결해진다.

실행결과

실행 결과 화면

🔗 참고

https://velog.io/@cjhlsb/React-axios-모듈화-해서-사용하기