react에서 api호출 함수 관리 어떻게하나요?

React에서 API 호출 함수를 관리하는 방법은 프로젝트에 따라 다를 수 있습니다. 하지만 일반적으로는 두 가지 방법을 사용합니다. #1 Export 함수 API 호출 함수를 각 도메인 파일 내에서 함수형으로 작성하고, 해당 함수를 export하여 다른 파일에서 import하여 사용합니다. 이 방법은 간단하고 직관적이며, 코드가 간결합니다. #2 Class & Static Method API 호출 함수를 클래스로 작성하고, static 메소드로 만들어 다른 파일에서 import하여 사용합니다. 이 방법은 함수형보다는 코드가 조금 더 길어지지만, 더 복잡한 로직을 다룰 때는 더욱 유용합니다. 이 두 가지 방법 중 어떤 것을 사용하든, 중요한 것은 일관성을 유지하는 것입니다. 프로젝트 전체에서 일관된 방법으로 API 호출 함수를 작성하고 관리해야 유지 보수가 쉬워집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#1
// api/search.js
export const searchName = async (query) => {
  // API 호출 코드
};

// component.js
import { searchName } from '../api/search';

const Component = () => {
  // ...
  const handleSearch = async () => {
    const result = await searchName('query');
    // ...
  };
  // ...
};

#2
// api/search.js
class Search {
  static async searchName(query) {
    // API 호출 코드
  }
}
export default Search;

// component.js
import Search from '../api/search';

const Component = () => {
  // ...
  const handleSearch = async () => {
    const result = await Search.searchName('query');
    // ...
  };
  // ...
};