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#1
2import { forkJoin, from } from 'rxjs';
3import { map, mergeMap, reduce } from 'rxjs/operators';
4
5const api1$ = from(fetch('https://api1.com').then(res => res.json()));
6const api2$ = from(fetch('https://api2.com').then(res => res.json()));
7const api3$ = from(fetch('https://api3.com').then(res => res.json()));
8
9forkJoin([api1$, api2$, api3$])
10  .pipe(
11    mergeMap(data => data),
12    reduce((acc, cur) => {
13      const { a, ...rest } = cur;
14      if (acc[a]) {
15        acc[a] = { ...acc[a], ...rest };
16      } else {
17        acc[a] = rest;
18      }
19      return acc;
20    }, {})
21  )
22  .subscribe(data => setMergedData(data));
23
24#2
25import { merge } from 'lodash';
26
27const api1 = fetch('https://api1.com').then(res => res.json());
28const api2 = fetch('https://api2.com').then(res => res.json());
29const api3 = fetch('https://api3.com').then(res => res.json());
30
31Promise.all([api1, api2, api3]).then(data => {
32  const mergedData = merge({}, ...data);
33  setMergedData(mergedData);
34});