[react] axios api 요청 코드 모듈화하기 (javascript)

코드의 가독성과 유지보수를 위해 백엔드와 소통하는 api 주소를 모듈화 하고자 했습니다.

api 요청 주소 및 axios 인스턴스 생성

• axios 요청을 할 때마다 주소를 작성해 줄 수도 있겠지만 유지보수를 용이하게 하고자 api 주소를 한 곳에 모아주었습니다.
• axios 인스턴스를 생성해서 사용하는 것 또한 코드의 가독성과 유지보수성을 높여줍니다.

// api.jsx

import axios from 'axios';

const BASEAPI = '/api';

const api = {
    news: '/news',
    members: '/members',
    articles: (articleId) => `/articles/${articleId}`,
};

const axiosInstance = axios.create({
    baseURL: BASEAPI,
});

export { api, axiosInstance }

api 요청

api를 요청하는 코드를 모아놓은 것입니다.

// fetch.jsx

import { api, axiosInstance } from './api'

// 회원 조회
function getMembers(success, fail) {
  return axiosInstance.get(api.members)
    .then(success)
    .catch(fail)
}

// 새로운 회원 등록
function postMembers(category, success, fail) {
  return axiosInstance.post(api.members, category)
    .then(success)
    .catch(fail)
}

// 뉴스 데이터 조회
function getNews(success, fail) {
  return axiosInstance.get(api.news)
    .then(success)
    .catch(fail)
}

// 뉴스 하나 조회
function getArticle(articleId, success, fail) {
  const articleUrl = api.articles(articleId)
  return axiosInstance.get(articleUrl)
    .then(success)
    .catch(fail)
}

export { getMembers, postMembers, getNews, getArticle }

모듈화 한 axios 요청 코드 사용

각 컴포넌트에서 모듈화 해둔 axios요청을 사용하는 방법입니다.

// Mypage.jsx
import { useState, useEffect } from 'react';
import { getMembers, postMembers } from '../api/fetch';

function MyPage() {
  	// 회원 정보
  	const [members, setMembers] = useState([])
  	
  	// 회원 생성
    function handleCreateMember() {
        postMembers(
            category, 
            (response) => {
                const key = response?.data.key
            },
            (error) => {
                console.log(error)
            }
        )
    }
    
    // 회원 조회
    useEffect(() => {
        getMembers(
          (response) => {
              setMembers(response?.data)
          },
          (error) => {
              console.log(error)
          })    
    }, []);

   
    return (
      	<div>
      		<div>
                {members.name}
            </div>
      		<div>
                {members.age}
            </div>
      	</div>   
    );
}

// NewsDetail.jsx
import { useState, useEffect } from 'react';
import { getArticle } from '../api/fetch';

function NewsDetailCard() {
  	// 뉴스 한 개 데이터
    const [article, setArticle] = useState([]);

  	// 뉴스 한 개 데이터 요청
    useEffect(() => {
        getArticle(
            articleId, 
        	(response) => {setArticle(response?.data)},
            (error) => {console.log(error)}
        );
    }, [articleId]);

   
    return (
      	<div>
      		<div>
                {article.title}
            </div>
      		<div>
                {article.content}
            </div>
      	</div>   
    );
}

• 이렇게 하게 되면 여러 컴포넌트에서 axios 요청을 일일이 적을 필요가 없어지기 때문에 코드의 길이가 짧아집니다.
• 또한 수정사항이 생겼을 때, 상위 파일에서만 수정해주면 되기 때문에 유지보수가 용이합니다.