리액트 공통API 분리시키기

vocabulary 어플리케이션 만들었을 때

여러 컴포넌트에서 통신을 해야하는 로직이 공통이여서  커스텀 훅을 이용해서 useFetch를 만들었었다.

 

//DayList.jsx

function DayList() {

    const [dayList, setDayList] = useState([])
    useEffect(() => {
        fetch('http://localhost:3003/days')
        .then(res => {
            return res.json()
        }).then(data => setDayList(data))
    }, [])
    
    ...

요런식으롱? useEffect에 렌더링이 될 때마다 fetch를 했다. 

days안에 있는 data를 응답받아서 setDayList에 넣었다. 

 

 

[공통으로 만든 useFetch]

//useFetch.jsx
import React, { useEffect, useState } from 'react'

function useFetch(url) {

    const [data, setData] = useState([])

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(db => setData(db))
    }, [url])

    return (
        data
    )
}

export default useFetch

마찬가지로 fetch에서 받는 응답을 data에 추가했고 return시켜줬다. 

그리고 필요한 컴포넌트에 import를 했다.

 

//DayList.jsx
import { Link } from 'react-router-dom'
import useFetch from '../hooks/useFetch'
function DayList() {
    const days = useFetch("http://localhost:3003/days")
    return (
        <div>
            <ul>
                {
                    days.map((db) =>
                        <li key={db.id}>
                            <Link to={`/day/${db.day}`}>day{db.day}</Link>
                        </li>
                    )
                }
            </ul>
        </div>
    )
}

export default DayList

 

---

 

아래부터는 api가 제공되는 사이트에서  Axios 인스턴스화 시켜봤다. 

인스턴스화 하는 이유는 위 useFetch와 마찬가지로 중복되는 부분을 줄여준다. 

 

axios를 설치하고, 내 API_KEY와 연결했다. ( 해당 사이트에서는 API_KET가 제공되었다. )

깃허브에 배포중이라 API_KEY가 함께 PUSH되지 않도록 .env파일을 루트에 만들었다. 

 

//axios.jsx 

import axios from 'axios'

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

export default instance

 

컴포넌트 명 자체를 axios로 만들었다.

다른 컴포넌트에서 import할 때 axios 라이브러리가 from으로 오지 않도록 주의!

 

잠깐, axios에서 알고 넘어가자,

Promise API를 사용하고, fetch와 다른점은 요청과 응답을 JSON형태로 자동으로 변경해준다. 

그 외 많은 차이점과 axios에 대한 내용은 아래 블로그 참고! 

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리

https://yamoo9.github.io/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD

API | Axios 러닝 가이드

 

 

다시 돌아와, 위 로직을 분석해보자.

 

[axios instance 만들기]

create()메서드를 이용해서 사용자 정의 구성을 사용하는 axios만의 instance를 만들 수 있다.

* baseURL : axios 인스턴스가 상대 URL을 해당 인스턴스의 메소드에 전달하도록 한다.

( url을 상대경로로 쓸대 url 맨 앞에 붙는 주소.

• 예를들어, url이 /post 이고 baseURL이 https://some-domain.com/api/ 이면,
  https://some-domain.com/api/post로 요청 가게 된다.)

* params: 요청과 함께 전송 될 URL매개 변수이다.  

 

 

//requests.jsx 

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

export default requests;

 

이 사이트엔 api가 제공된다고 했다. 

그래서 요청을 보낼 request 각각의 경로를 따로 정리를 해놨다.

참고로 create의 request는 config (사용 가능한 구성) 만 받는다. 

axios.request(config)

 

이제  통신 요청할 때, axios 인스턴스 만든거에 + request를 하면 된다!

 

 

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

...

	const fetchData = async () => {
    	const request = await axios.get(requests.fetchRomanceMovies)
        
    ...

 

예를 들자면 이런식으로!

fetchData함수는 useEffect안에 호출되어있다. 

async / await을 통해서 axios 라이브러리로 만든 axios를 가져오고,

get 메소드 값에는 별도로 api경로를 지정한 requests를가져온다. 

( 해당 구문에 대한 글은 아래 링크로 확인 )