React | API 요청을 분리해보기..

axios

axios 설치

npm install axios

/src경로에 api폴더를 생성하고, 공통으로 사용할 axios를 내보낸다.
export apiClient로 바로 내보내도 된다.

api요청 도메인 같은 값은 환경변수로 관리하는 것이 좋다.
create-react-app으로 생성한 프로젝트는 .env파일로 관리 가능하다.

// /src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
      baseURL: process.env.REACT_APP_BASE_URL;    // 환경변수로 지정한 BASE_URL을 사용
});

// interceptor처리도 작성한다.

//export apiClient;
const { get, post, put, delete: destroy } = apiClient;
export { get, post, put, destroy };

위에서 작성하진 않았지만 interceptors같은 것도 위 파일에서 작성한다.
특정 상태코드나 에러에 대응할 수 있다.

요청은 클래스로 만들어 관리하자!

api폴더에 생성할지.. services라는 폴더를 만들어 작성할지 고민하다가 services폴더를 생성했다.
실제 API에 요청할 때는 Auth.[method name]를 호출한다. 즉, 로그인을 할 때는 Auth.login을 호출.

// /src/services/Auth

import {get, post} from '../api';

const LOGIN = '/auth/login';
const LOGOUT = '/auth/logout';

const ACCESS_TOKEN_KEY = 'access_token';

class Auth {

  access_token;

  login = async(options, data) => {
       const res = await post(LOGIN, data, options);
    this.set(res.data.access_token);

    return res.data;
  }

  // ...로그아웃..

  get = () => {
      return this.access_token;
  }

  set = (token) => {
    // access_token 저장 처리
  }

  remove = () => {
    // access_token 삭제 
  }
}

export default new Auth();

access_token을 저장하고 삭제하는 부분이 api 요청과 함께 있는게 맞을까..? 어렵다..