[TroubleShooting] query data를 여러개 가져오는과정중 발생한에러

일단 첫번째 문제는 

query를 이용해서 data를 여러개 가져오는 과정중에 발생했다.

 

queries를 이용해서 해결했다.

const queries = [
    { queryKey: "tvpopular", queryFn: getTvP },
    { queryKey: "tvrate", queryFn: getTvT },
  ];

  const results = useQueries(queries);

 

이렇게해서 results를 console.log해보니 [{},{}]이렇게 데이터가 담겨있었다.

 

---

가장 큰 문제가 발생했다.

넷플릭스클론을 하는과정중인데

메인화면에 popular, rate 슬라이더를 두줄 만드는데

슬라이더를 만드는 과정까지는 무리없었다.

 

해당작품을 클릭하면 그 작품에 대한 설명이 나오는 오버레이를 구현하는 과정중에.

popular 슬라이더부분은 다 뜨는데 

rate 슬라이더부분은 안뜨고 

이런식으로 비동기문제인지 이런 문제가 발생했다.

 

그래서 결국 query data를 다 가져와서 그걸 가공해서 한 배열에 쭉 담았다.

[{},{}]저렇게 20개 20개 나눠져 있는 데이터를 쭉 한번에 담아서

[] 이 안에 40개가 쭉 들어가게 담았다.

 const queries = [
    { queryKey: "tvpopular", queryFn: getTvP },
    { queryKey: "tvrate", queryFn: getTvT },
  ];

  const results = useQueries(queries);

  //새로 데이터 가공했다.
  let newArr: ITv[] = [];
  for (let i = 0; i < results.length; i++) {
    for (let j = 0; j < results[i]?.data?.results.length; j++) {
      const singleData = results[i]?.data?.results[j];
      newArr.push(singleData);
    }
  }

그래서 newArr를 console.log찍으면 모든 작품이 다 담겨있다. (밑의 그림참고)

 

 

구현하는데는 일단 문제가 없다.

 

근데 데이터를 받아와서 그걸 또 가공해서 구현하니까 속도가 좀 느린거같다.

 

최적화를 해봐야할 필요를 느낀다.