리액트 config.js 파일로 API 관리하기

위코드에서 공부하며 정리한 내용입니다.

백엔드 서버 IP 주소가 변경되면 모든 API 의 IP 주소를 수정해야 합니다. 이때 config.js 파일을 만들어 관리하면 전체 IP를 한번에 수정할 수 있습니다. (이렇게 하지 않으면 모든 fetch 함수를 찾아가서 직접 주소를 변경해야 함) 기본적인 구조는 아래와 같습니다.

// src/config.js
const BASE_URL = 'http://10.58.5.151:8000'// 변수 값 설정
export const GET_PRODUCT_API = `${BASE_URL}/products` // 특정 패스파라미터 앞에 해당 변수 넣어 API 주소 세팅

// 사용하는 컴포넌트
import { GET_PRODUCT_API } from '../../../config.js'; // config.js 파일에서 해당 API를 import 하고
...
fetch(`${GET_PRODUCT_API}/5`).then(...).then(...); // fetch 함수에 넣어서 사용 

페이지별 API에 각자 패스 파라미터를 붙여 객체로 관리한다면 아래와 같고

const BASE_URL = "http://10.58.52.67:3000";

export const API = {
  LOGIN: `${BASE_URL}/user/signin`,
  RECRUITMENT: `${BASE_URL}`,
  FAQ: `${BASE_URL}/faq`,
  CREWRECRUIT: `${BASE_URL}/recruit`,
  MAIN: `${BASE_URL}`,
  MYPAGE: `${BASE_URL}/mypage`,
  WISHLIST: `${BASE_URL}`,
  HEADER: `${BASE_URL}`,
};

위와 같이 만든 config.js 파일은 아래처럼 사용할 수 있습니다.

import { API } from "config"; // API 객체를 가져오고

//

useEffect(() => {
    fetch(`${API.MYPAGE}`, { // 키가 MYPAGE 인 API 를 불러온다.
      headers: {
        authorization: localStorage.getItem("TOKEN"),
        "Content-Type": "application/json;charset=utf-8",
      },
    })
      .then((res) => res.json())
      .then((res) => setUserInfo(res.result));
  }, []);