axios 관련 폴더 정리

 

Axios Instance 활용 시

가장 간단한 방법은

일단 api 폴더에 index.js 만들기

import Axios from 'axios'

const axios = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
})

export default axios

 

💡 아예 파일 따로 빼서 BASE_URL 만들까?

💡 어차피 이 instance를 계속 재사용할 건데 그냥 baseURL에 URL 적으면 되겠지

 

같은 api 폴더 내에 API 작성

예: getUser.js

import axios from '.'

export const getUser = async (name, position) => {
  const response = await axios.get('/api/data', {
    params: {
      name: name,
      position: position,
    },
  })

  return response.data
}

 

팀원 분들 의견에 따라 response.data가 아니라 response를 return하기로 함

 

확인

...
const responseData = await getUser(name, position)
...

 

 

💡 requests.js를 만드는 경우도 있는 것 같다.

💡 무한반복은 useEffect를 통해 막는다.

💡 위의 예시와 달리 쿼리는 대부분 처음부터 커스텀 훅의 형식을 띄게 될 것 같다.

 

https://majidlotfinia.medium.com/react-query-best-practices-separating-concerns-with-custom-hooks-3f1bc9051fa2

React-Query Best Practices: Separating Concerns with Custom Hooks

 

참고

 

핵심은 axios instance를 api 폴더 내에 index.js로 저장하고

👉 api 폴더 내에 커스텀 훅 형태로 api들을 관리하고

👉 필요한 곳에서 사용