[React] Axios

Axios

브라우저, Node.js를 위한 Promise API를 활용하는
HTTP 비동기 통신 라이브러리이다.

백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.

설치방법

npm install axios --save

사용법

React 컴포넌트에서 import 하기

import axios from 'axios';

Axios를 사용하서 HTTP 요청 보내기

axios.get('/api/data')
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

React에서 Axios 인스턴스하기

/src 내부에 api 라는 이름의 폴더를 생성한다.

/src/api 폴더 내부에 axios.js 파일을 생성하고 인스턴스를 생성한다.

import axios from "axios";

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
    params: {
        api_key: "",
        language: "ko-KR",
        ...
    }
})

export default instance;

/src/api 폴더 내부에 request.js 만들고 baseURL 뒤에 붙을 문자열 객체를 작성한다.

const requests = {
  fetchNowPlaying: "movie/now_playing",
  fetchNetflixOriginals: "/discover/tv?with_networks=213",
  fetchTrending: "/trending/all/week",
  fetchTopRated: "/movie/top_rated",
  fetchActionMovie: "/discover/movie?with_genres=28",
  fetchComedyMovies: "discover/movie?with_ngenres=35",
  fetchHorrorMovies: "discover/movie?with_ngenres=27",
  fetchRomanceMovies: "discover/movie?with_ngenres=10749",
  fetchDocumentariesMovies: "discover/movie?with_ngenres=99",
};

export default requests;

api 요청 보내기

src/api/axios.js에서 만든 instance와
src/api/requests.js에서 만든 requests 오브젝트를 사용해서
api 요청을 보낸다.

import React, { useState, useEffect } from "react";
import requests from "../api/requests";
import axios from "../api/axios";

export default function Banner() {
  const [movie, setMovie] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);
  const fetchData = async () => {
    const request = await axios.get(requests.fetchNowPlaying);
    console.log(request);
  };
  return <div></div>;
}