[React 공부노트 #3] react에서 axios 사용해서 api와 통신하기

Networking

api.js 이라는 파일을 만들어서 api와 통신하는 코드를 몰아 넣을것이다.

 

그래야지 API 요청에 대한 비지니스 로직이 분산되지 않고 한곳에서 컨트롤이 되기에 유지보수성이 더욱 좋아진다.

나는 API서버와 axios를 사용해서 통신을 할것다

axios

axios

이 모듈은 HTTP통신을 보내게 할수 있는데, 이 모듈을 통해서 api서버에 원하는 요청을 보낸뒤에 받아오는 결과값을 사용할것이다.

const api = axios.create({
  baseURL: "https://api.themoviedb.org/3/",
  params: {
    api_key: "----",
    language: "en-US",
  },
});

위와 같이 baseURL과 params를 설정을 해준다면 중복되는 코드를 막을수가 있다.

basecode로 default URL을 설정해준다.

 

이후, api통신에 필요한 api key와 가져올 언어를 params에 담아서 요청을 해준다.

자세한 코드는 axios document 링크를 남길테니 확인해보자.

Getting Started | Axios Docs

export const moviesApi = {
  nowPlaying: () => api.get("movie/now_playing"),
  upcoming: () => api.get("movie/upcoming"),
  popular: () => api.get("movie/popular"),
};

export const tvApi = {
  topRated: () => api.get("tv/top_rated"),
  popular: () => api.get("tv/popular"),
  airingToday: () => api.get("tv/airing_today"),
};

항상 api요청을 매번 create하는것이 아닌 방금 위에서 만들어둔 api객체의 get요청을 사용해서 원하는 요청을 보낼수 있게 function을 object로 묶어서 export시켰다.

 

  showDetail: (id) =>
    api.get(`tv/${id}`, {
      params: {
        append_to_response: "videos",
      },
    }),

여기서 특정 영화와 같이 id를 사용한다면, 매개변수를 받도록한 다음에 원하는 api에서 요구하는대로 파라미터에 담아서 매개변수에 해당하는 데이터를 받아올수있다.

 

이와 같은 방법으로 프론트앤드 서버에서 백앤드서버(api 서버)와 통신을 해서 데이터를 받아올수있고, 이것으로 인해서 프톤트앤드와 백앤드의 분리가 되는것이다.