API 모듈화 하기

시작하기에 앞서

주의

해당 블로그의 모든 문서는 학습한 내용을 제 방식으로 정리하여 작성하고 있습니다.
순수 창작물도 아니고, 틀린 내용이 있을 수 있으므로 참고하고 읽어주시면 감사하겠습니다.

서론

첫 ReactJS 개인 프로젝트를 진행하고 있던 중 고민이 하나 생겼다.

필요한 데이터를 요청할 때 Axios를 통해서 받아오고 있었는데,

동일한 API를 요청할 때마다 복사 붙여넣기로 처리하다보니 중복되는 코드가 너무 많아지는것을 볼 수 있었다.

이를 어떻게 해결 할까 고민하다가 Java처럼 서비스 Class를 정의해놓으면

필요한 곳에서 인스턴스를 생성하고 메서드를 호출하면 중복을 제거할 수 있지 않을까 하는 생각이 문득 들었다.

프론트쪽은 잘 몰라서, 좋은 방법인지는 모르겠지만 그래도 한 번 정리해보려고 한다.

API 모듈화 전

const onClickHandler = () => {
    const formData = { title, content, language };
    const requestURL = "...";

    // 등록 API 호출
    axios.post(requestURL, formData, headers: {
        Authorization: jwtToken,
    })
    .then((response) => {
        ...
     })
    .catch((err) => { ... });
}

등록 API를 A에서만 사용하고 있으면 저 코드로 끝이지만,

B와 C에서도 사용하고 있다고 생각하면 똑같은 코드를 B와 C에도 작성해줘야 한다.

중복되는 코드가 너무 많아지고 매번 동일한 코드를 복사하고 붙여넣기 해야 한다는 큰 불편함이 생긴다.

클래스를 하나 생성해서 모듈화하여 재사용성을 높여보고자 한다.

API 모듈화 후

BookService.ts

export class BookService {
  axiosInstance: AxiosInstance;

  constructor() {
    this.axiosInstance = axios.create({
      baseURL: "http://localhost:8080/api",
      headers: {
        Authorization: jwtToken,
      },
    });
  }

  /* 단어장 단일 조회 API */
  findById = async (bookId: number) => {
    try {
      return await this.axiosInstance.get(`/books/${bookId}`);
    } catch (err) {
      console.error(err);
    }
  };

  /* 내거 생성한 단어장 목록 조회 API */
  findAll = async (page: number) => {
    try {
      return await this.axiosInstance.get(`/books/mine`, {
        params: {
          page,
        },
      });
    } catch (err) {
      console.error(err);
    }
  };

  /* 단어장 등록 API */
  create = async (formData: BookFormData) => {
    try {
      return await this.axiosInstance.post(`/books`, formData);
    } catch (err) {
      console.error(err);
    }
  };

  /* 단어장 수정 API */
  update = async (formData: BookFormData, bookId: number) => {
    try {
      await this.axiosInstance.patch(`/books/${bookId}`, formData);
    } catch (err) {
      console.error(err);
    }
  };

  /* 단어장 삭제 API */
  delete = async (bookId: number) => {
    try {
      await this.axiosInstance.delete(`/books/${bookId}`);
    } catch (err) {
      console.error(err);
    }
  };
}

BookService 클래스를 하나 정의하고 export 키워드로 내보내기 해준다.

// (1) Import
import { BookService } from "../service/BookService";

const ExampleView = () => {
  // (2) 인스턴스 생성
  const bookService = new BookService();

  const onClickHandler = async () => {
    const formData = { name, content, language, shareStatus };

    // (3) 메서드 호출
    await bookService.create(formData);
    const response = await bookService.findAll(0);

    ...
  };

  return (...);
};

export 키워드로 내보내기 한 서비스 클래스를 필요한 곳에서 Import 하고 인스턴스를 생성해서

필요한 API 메서드를 호출하기만 하면 된다.

실제로 개인 프로젝트에 적용해 보니 모듈화 전보다 코드가 훨씬 단순해졌다!