React에서 여러 API의 데이터를 합쳐서 사용하는 좋은 방법 추천해주세요.

Map 함수 사용하셔서 같은 포멧으로 만드신 후에 스프레드 하시면 될 거 같습니다:) [...a, ...b, ...c]

여력이 된다면 BFF를 도입하는 것도 방법일 것 같습니다. 컴포넌트에서만 보기에 하나로 쓰는 것처럼 보이도록 커스텀 훅을 만들어 쓰는 것도 방법이겠네요.

여러 API에서 가져온 데이터를 합치는 방법은 여러 가지가 있습니다. 다음은 그 중 몇 가지 방법을 소개해드립니다. 1. Promise.all()을 사용하여 각 API에서 데이터를 가져와 합치는 방법 아래 예시에서는 각 API에서 데이터를 가져와서 Promise.all()을 사용하여 모든 API에서 가져온 데이터를 배열로 합친 후, reduce()를 사용하여 중복되는 데이터를 찾아 공통 컬럼만을 가지고 있는 하나의 객체로 합치는 방법을 사용하였습니다. 2. RxJS를 사용하여 각 API에서 데이터를 가져와 합치는 방법 아래 예시에서는 RxJS의 forkJoin()을 사용하여 각 API에서 데이터를 가져오고, mergeMap()을 사용하여 배열을 평면화한 후, reduce()를 사용하여 중복되는 데이터를 찾아 공통 컬럼만을 가지고 있는 하나의 객체로 합치는 방법을 사용하였습니다.

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
#1
import { forkJoin, from } from 'rxjs';
import { map, mergeMap, reduce } from 'rxjs/operators';

const api1$ = from(fetch('https://api1.com').then(res => res.json()));
const api2$ = from(fetch('https://api2.com').then(res => res.json()));
const api3$ = from(fetch('https://api3.com').then(res => res.json()));

forkJoin([api1$, api2$, api3$])
  .pipe(
    mergeMap(data => data),
    reduce((acc, cur) => {
      const { a, ...rest } = cur;
      if (acc[a]) {
        acc[a] = { ...acc[a], ...rest };
      } else {
        acc[a] = rest;
      }
      return acc;
    }, {})
  )
  .subscribe(data => setMergedData(data));

#2
import { merge } from 'lodash';

const api1 = fetch('https://api1.com').then(res => res.json());
const api2 = fetch('https://api2.com').then(res => res.json());
const api3 = fetch('https://api3.com').then(res => res.json());

Promise.all([api1, api2, api3]).then(data => {
  const mergedData = merge({}, ...data);
  setMergedData(mergedData);
});