[Axios] React Axios 설정 및 사용하기

안녕하세요! 프뚜입니다.

---

[개발 환경]

- OS: Windows 10 64Bit

- React: 18.2.0

---

# Axios 설치하기

yarn add axios

---

# axios.js 생성하기

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

// 2023.02.03[프뚜]: 공통 header
const commonHeader = (headers) => {
  return headers;
};

// 2023.02.03[프뚜]: 공통 params(body)
const commonParams = (params) => {
  return params;
};

// 2023.02.03[프뚜]: get(Hooks)
export const useAxiosGet = (uri, headers, params) => {
  const [data, setData] = useState();
  useEffect(() => {
    axios
      .get(uri, {
        headers: commonHeader(headers),
        params: commonParams(params)
      })
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [uri]);

  return data;
};

// 2023.02.03[프뚜]: post(Hooks)
export const useAxiosPost = (uri, headers, body) => {
  const [data, setData] = useState();
  useEffect(() => {
    axios
      .post(uri, body, {
        headers: commonHeader(headers)
      })
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [uri]);

  return data;
};

header와 params(body)에 공통적으로 값을 추가할 수 있게 common이 있습니다. Hooks를 통해 axios를 사용하고 있습니다.

---

# 설정한 axios 사용하기

import { useAxiosGet } from './axios/axios';

const App = () => {
  const data = useAxiosGet('https://codingapple1.github.io/shop/data2.json', {}, {});
  return <div>{JSON.stringify(data)}</div>;
};

export default App;

uri, header, params의 값을 추가하고 return받은 값을 사용할 수 있습니다.

---