[React]여러 api 불러와 데이터 합치기

여러 api 데이어 합치기

영화 API를 불러올 때 3개의 슬라이드에 각각 다른 API를 불러와야했다.
그래서 if문을 활용해서 각 슬라이드마다 data를 불러오려했다..

if (bigMovieMatch) {
    const movieId = bigMovieMatch.params.movieId;
    if (popularData) {
      clickedMovie = popularData.results.find(
        (movie) => movie.id.toString() === movieId
      );
    } else if (nowPlayingData) {
      clickedMovie = nowPlayingData.results.find(
        (movie) => movie.id.toString() === movieId
      );
    } else if (topRatedData) {
      clickedMovie = topRatedData.results.find(
        (movie) => movie.id.toString() === movieId
      );
    }
  }

=> 문제 발생 : 아래 슬라이드에 위에 슬라이드와 동일한 영화들은 뜨지만 동일하지 않는 영화들은 뜨지않는다...
이유 : if문으로 위에 조건이 수행되면서 뒤의 else문을 수행할 필요가 없어져 뒤에 영화데이터들이 불러와지지 않는 것이였다..

그래서 찾은 해결방법.
세개의 api 데이터들을 하나로 묶어버리기!!

const movieList: IMovieTv[] =
  popularData?.results && nowPlayingData?.results && topRatedData?.results 
  ? [
      ...popularData?.results,
      ...nowPlayingData?.results,
      ...topRatedData?.results,
   ]
: [];

콘솔로 찍어보면 총 60개의 영화 데이터들이 movieList[]들이 찍힌다.

그러면 이 안에서 해당 영화 id와 동일한 영화에 대한 데이터들을 불러올 수 있게된다!!

if (bigMovieMatch) {
    const movieId = bigMovieMatch.params.movieId;
    const movieList: IMovieTv[] =
      popularData?.results && nowPlayingData?.results && topRatedData?.results
        ? [
            ...popularData?.results,
            ...nowPlayingData?.results,
            ...topRatedData?.results,
          ]
        : [];
    console.log(movieList);
    clickedMovie = movieList.find((movie) => movie.id.toString() === movieId);
  }

---

장르 영역에서도 동일하게 사용

• 영화 장르와 티비 장르 api를 불러와 하나로 묶어줌

const genreList: IGenre[] =
    genreData && genreTvData
      ? [...genreData.genres, ...genreTvData.genres]
      : [];

원하는 위치에 나열

{clickedMovie.genre_ids?.map((id) => (
                      <span className="genre" key={id}>
                        {genreList?.find((item) => item.id === id)?.name}
                      </span>
                    ))}