[React]-axios와 class를 사용해서 api 호출하기(1)

youtube 작업을 할 때는 하루 api 호출 할당량이 정해져 있기 때문에 진짜 api를 호출하지 않고 mock-up data를 만들어서 불러온다.
이럴 때 서로 switching이 용이하게 하기 위해 axios를 모듈화해서 재사용성을 높이는 법에 대해서 알아볼 것이다.

1. axios 모듈화하기

기본적으로 모듈화하는 법은 아래처럼 해주면 된다.

// youtube.js

import axios from "axios";

export async function search(keyword) {
  return axios
    .get(`/data/${keyword ? "search" : "popular"}.json`)
    .then((res) => {
      console.log(res);
      return res.data.items;
    });
}

useQuery 콜백함수만 따로 빼서 Videos.jsx에서 import 해주는 방식이다.

// Videos.jsx

const {
    isLoading,
    error,
    data: videos,
  } = useQuery(["videos", keyword], () => search(keyword));

그럼 이전 포스트에서 썼던 방식보다 훨씬 깔끔하지만 mock-up data와 진짜 api의 간편한 switching이 불가하다.
그럼 어떤 방법을 써야 할까?

2. class 사용하기

바로 class를 사용하는 것이다!
우선 mock-up data를 불러오는 fakeYoutube class를 만들어보자.

// fakeYoutube.js

import axios from "axios";

export default class FakeYoutube {
  constructor() {
    // 빈 생성자
  }

  async search(keyword) {
    // #이 붙으면 class 내부에서만 호출이 가능한 private 함수!
    return keyword ? this.#searchByKeyword(keyword) : this.#mostPopular();
  }

  async #searchByKeyword() {
    return axios
      .get(`/data/search.json`)
      .then((res) => res.data.items)
	  // search.json에서 id가 객체로 되어 있는 부분을 map을 이용해 변환!
      .then((items) => items.map((item) => ({ ...item, id: item.id.videoId })));
  }

  async #mostPopular() {
    return axios.get(`/data/popular.json`).then((res) => res.data.items);
  }
}

constructor 부분은 진짜 api를 호출할 때 필요한 부분이기 때문에 비워둔다.

class 내부에서만 호출이 가능한 private 함수를 만들었다.
그리고 search.json에서 id는 popular.json과 다르게 객체 형태로 되어있기 때문에 map을 이용해 popular.json의 id와 같은 형태로 변환해주는 과정이 꼭 필요하다!!

// Videos.jsx

const {
    isLoading,
    error,
    data: videos,
  } = useQuery(["videos", keyword], () => {
    const youtube = new FakeYoutube();
    return youtube.search(keyword);
  });

Videos.jsx에서 FakeYoutube를 불러와서 search함수를 실행해주면 keyword의 유무에 따라서 searchByKeyword 또는 mostPopular 함수가 호출되어 데이터가 return 된다!

class는 처음 사용해봐서 익숙치 않은데 계속 반복하다 보니 조금씩 이해가 되는 것 같다..!!