React에서 api 관리를 어떻게 하나요?

백엔드에서 api주소를 전달 해 주면 axios 에서 baseUrl만 설정해주고 사용하여야 하는 페이지에서 axios를 바로 사용하거나 api 파일을 따로 관리한다면 말씀하신 것 처럼그곳에서 작성한 axios 객체를 import해서 쓰거나 쓰거나 합니다. react-query를 사용하면 그것 역시 쿼리를 관리하는 파일에서 가져다 씁니다. 단순 api 호출은 괜히 복잡하게 클래스나 훅을 만들거나 하진 않는 경우가 많은것같아요

저는 API를 클래스로 만들어서 호출하지는 않고, 개별 함수로 만들어서 호출하는 방식으로 하고 있습니다. 실제로 해당 API를 호출하는 곳이 어딘지에 따라 호출 방식에 차이가 있긴 해요. 저는 주로 NextJS로 프로젝트를 만들 때, React-query를 사용하는데요. 서버 사이드에서 API를 호출하는 경우(ex. ReactQuery-Prefetch, 인증 관련)에는 API 함수를 직접 호출하는 편이고요. (아래 코드 중 findQuestions 를 직접 호출) 클라이언트 사이드에서는 React-query로 해당 API를 감싼 로직을 호출하는 식입니다. (아래 코드 중 useQuestions 를 호출) 질문자께서는 클래스로 만들어서 호출하는 방식도 얘기를 해주셨는데, API 메서드를 만들 때 클래스까지는 이용하지 않았던 거 같아요. 클래스를 사용하는 케이스도 같이 남겨주시면 더 얘기해볼 수 있을 것 같습니다 :)

1
2
3
4
5
6
7
8
9
// src/api/question.ts

const findQuestions = () => {
  return axios('~~~');
};

// src/api-hooks/useQuestions.ts

const useQuestions = () => {};

이건 팀에 따라 다른 문제라고 생각합니다. 개인적으로는 훅으로 관리하는 걸 선호합니다만 팀의 정책에 따라 다릅니다.

팀의 규칙이나 구조에 따라 다를 수 있는 문제인지라 전역 Axios instance 를 생성해서 인터셉터를 이용한 미들웨어를 구현해서 코드 재사용성을 올려볼 수 있겠고 도메인 마다 구조를 나눠서 각각 api 호출 코드가 담겨져 있는 hook 파일을 만들수 있을것 같아요 react-query 을 사용해서 api로 호출해서 받아온 데이터 캐싱으로 페이지 로딩 속도도 늘릴수 있겠구요