[React/Next.js] Axios 모듈화

지난 프로젝트에서는 api 호출(axios)시 아래와 같이 커스텀 훅을 만들어서 사용하였다.

import { useState, useEffect } from 'react';
import axiosInstance from 'utils/axiosInstance';

/**
 * 읽지 않은 메시지 개수 조회
 * @returns {number} noticeCount 읽지 않은 메시지 개수
 */

const useCountNotice = () => {
  const [noticeCount, setNoticeCount] = useState<number>(0);

  const getNoticeCount = async () => {
    try {
      const response = await axiosInstance({
        method: 'GET',
        url: '/api/v1/notice/list-count',
      });
      setNoticeCount(response.data);
    } catch (error) {
      console.log('서버 오류:', error);
    }
  };

  useEffect(() => {
    getNoticeCount();
  }, []);

  return { noticeCount };
};

export default useCountNotice;

데이터 정제가 필요 없는 post 요청 시에도 커스텀 훅을 만들었었는데, 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재사용하기에 최적화되어 있으므로 이는 적합하지 않다고 생각이 들었다.

그래서 새로운 프로젝트에서는 axios 요청을 다음과 같이 모듈화 하기로 결정하였다.

1. api 요청 함수를 유틸 함수(util function)로 모듈화
2. 데이터 정제 또는 상태 로직이 필요한 경우 커스텀 훅 또는 새로운 유틸 함수 생성

게시글을 불러오는 axios 요청을 예를 들어 보자.

• GET 요청을 하는 axios 함수 만들기

utils/apis/getPosts.ts

import axios from 'axios'

export default async function getPosts() {
    const response = await axios({
        method: 'GET',
        url: 'http://localhost:3001/posts'
    })
    return response.data
}

• 데이터에 맞는 타입 정의

types/posts.ts

export default interface IPost {
    title: string;
    content: string;
    id: number;
}

• 페이지에서 사용하기

import { GetStaticProps, NextPage } from 'next'  
import getPosts from '@utils/apis/getPosts'
import IPost from '@types/post'

type SSGProps = {
    posts: IPost[]
}

const AxiosTest : NextPage<SSGProps>= ({ posts }) => {
    return (
        <div>
            <h1 className='font-bold text-lg'>게시물 목록</h1>
            <ul>
                {posts.map((post) => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    )
}

export const getStaticProps: GetStaticProps<SSGProps> = async () => {
    const posts = await getPosts();
    return {
      props: { posts },
    };
  }


export default AxiosTest

• 정상 출력 확인