[React] 프로젝트 리스트 필터링 여정(1) - Promise.all

Today, What I learned?

마이페이지의 해당 유저 프로젝트 리스트를 필터링하기 위한 긴 여정....

나를 빙글 돌아버리게 만들었던 Promise와 해결할 수 있었던 Promise.all에 대해 알아본다.

 

 

발단, Promise 배열

우리 프로젝트의 데이터 구조는 조금 복잡한 편인데..

마이페이지에서의 프로젝트 리스트는 활성화된 카테고리에 따라서 그에 해당하는 프로젝트들을 보여주어야 한다.

 

참여한 프로젝트라면 지원한 프로젝트만 보여주는 식..

 

뭐 여기까지야 보통의 필터링이지 않나? 싶을 수 있지만 저 데이터를 가져오기 위해서는

얻어온 각각의 문서아이디 리스트를 통해서 각각의 프로젝트 정보를 다시 조회해야 하는.. 과정을 거쳐야 한다.

왜 데이터 구조가 이런가요?라고 묻는다면 우리 팀은 모두 프론트엔드이기 때문이고.. NoSQL인 파이어베이스의 파이어스토어를 이용 중이기 때문에 이것이 현재로서 최선이었다!라고 답하겠다...

 

이거 꽤 복잡해보이는걸,,,,

findWithCollectionName 라는 함수를 통해 프로젝트 정보를 가져올 수 있는데..
문제는 map 안에서 저 함수를 통해 반환하면 Promise의 배열이 반환된다는 점이었다.

[Promise, Promise, ... ] 이렇게.. 😂

 

((findWithCollectionName 이 함수가 비동기 함수였기 때문에 Promise를 반환했기 때문에 당연했음))

 

 

여러 글들을 참고해서 함수를 바깥으로도 빼보고.. 별 시도를 다 했는데도 지겹게 반환되는 Promise 배열은 정말 고통 그 자체였다.. 흑흑
멘붕이 오다보니 구글링을 어떻게 해야 할지도 모르겠어서 팀원분들에게 도움을 요청!..

 

팀장님에게서 Promise.all을 이용해보라는 조언을 받았다.

 

 

Promise.all

Promise.all()은 프로미스 배열 안에서 모든 프로미스가 완료될 때까지 기다려서, 모든 프로미스의 결과 값을 최종적으로 반환한다..!

Promise.all() 외에도 중간에 하나라도 거부된다면 중단되는 Promise.race() 메서드가 있었다.

 

 

나는 중간에 반환되면 안 되었기 때문에 커스텀 훅의 함수를 아래와 같이 수정했더니..

  // 현재 선택된 탭의 프로젝트 리스트 조회 함수
  const getActiveProjects = async (params: any) => {
    const [_, pidList] = params.queryKey;

    const data = await Promise.all(
      pidList.map((pid: string) => findWithCollectionName('post', pid)),
    );
    const filteredData = data.filter((item) => item !== undefined);

    return filteredData;
  };

 

 

드디어 내가 찾던 온전한 데이터가 나오는 것을 볼 수 있었다!!!!!! (감동 그 잡채)

 

이 함수 역시 비동기 함수였기 때문에.. 실제적으로 데이터를 가져올 때는 useQuery를 이용해서 가져왔다.

  const { data: activeProjectsData }: any = useQuery({
    queryKey: ['myProjects', currentPidList],
    queryFn: getActiveProjects,
    staleTime: staleTime.myProjects,
  });

일단 이렇게 두 개의 탭에 대한 프로젝트 리스트는 잘 가져올 수 있게 되었다.

 

하지만 끝날 때까지 끝난 게 아니다 ㅎㅅㅎ...
2편에서 계속..

 

 

참고

https://velog.io/@yhe228/ayncawait%EB%A5%BC-map%EC%95%88%EC%97%90%EC%84%9C-%EC%9D%B4%EC%9A%A9%ED%95%98%EB%A0%A4%EB%A9%B4

aync/await를 map안에서 이용하려면?