[넥스트 Next.js] 쇼핑몰 프로젝트_파이어베이스 , 리액트쿼리 제대로 알기

어제 파이어베이스에서 받아온 데이터를 useEffect에 담아 파싱 해서 state에 담아줬다

useQuery를 사용하면 useEffect과 state를 사용할 필요 없이 바로 가공해서 data를 사용하면 됐는데 잘못된 코드를 쓰고 있었던 것 useQuery로 데이터 통신하는 것에 대해 이해도가 많이 떨어지는 거 같다 하나씩 다시 코드를 살펴보자

---

지난 글에서 사용한 React Query 사용 오류에 대한 수정 코드

• {isLoading, isError, data, refetch } - useQuery에 내장되어 있는 기능들 로딩, 에러 상태 관리 변수, 요청 데이터 저장 변수, 쿼리를 수동으로 불러오는 함수를 사용했다
• queryKey - data 변경 시 queryKey를 이용하면 된다(등록, 수정, 삭제 등)
• queryFn - 데이터 통신 함수로 받아온 데이터의 return값이 data에 저장된다. 그러니까 doc.id가 들어간 배열을 따로 빼서 state에 넣는 게 아니라 배열을 리턴해주면 data에 들어가는 것 

 const { isLoading, isError, data, refetch } = useQuery({
    queryKey: ['mainProductData'],
    queryFn: async () => {
      const response = await getDocs(
        selectedTab
          ? query(collection(db, 'product'), orderBy('createdAt', 'desc'))
          : query(collection(db, 'product'), orderBy('createdAt', 'asc'))
      );
      console.log('response', response);
      const fetchedProducts: any = [];
      response?.forEach((doc: any) => {
        const products = doc.data();
        fetchedProducts.push({ ...products, id: doc.id, products });
      });

      return fetchedProducts;
    }
  });

useEffect
화면이 렌더링 될 때 실행된다(의존성 배열이 비어있다는 전제)

Query를 사용하는 이유
서버에서 받아오는 데이터를 캐싱하여 서버에 부하를 줄일 수 있고 데이터를 전역에서 사용할 수 있다


async, await
비동기 통신은 응답과 요청이 동시에 진행된다 데이터 요청 후 화면에 바로 보여줘야 하는데 응답이 지연되는 경우, 빈 화면만 나오게 되는 것 비동기 통신의 이런 문제를 해결하기 위해 요청 후 응답이 완료되면 데이터를 받아올 수 있도록 async, await를 사용한다

---

파이어베이스의 데이터 요청

• 변수에 콜백함수를 넣어 파이어베이스에서 받아온 데이터를 담아준다
• 비동기 통신이므로 async, await를 사용할 것
• response는 요청한 데이터값인 QuerySnapshot을 담고 있다 ( QuerySnapshot - getDoc( 데이터 요청 메서드 )에 의해 반환되는 객체 query에 맞는 값을 담고 있다 )
• query - 파이어베이스에 데이터를 요청하는 것. orderBy, where를 사용해 원하는 데이터 형식을 요청할 수 있다.
• doc id(테이블 각 문서 ID)가 담긴 새 배열을 만들기 위해 빈 배열 변수를 선언해 준다
• data는 객체인데 배열 메서드인 forEach를 사용한다는 게 의아했는데 forEach는 우리가 아는 forEach가 아닌 QuerySnapshot에 내장된 기능이었다(우리가 아는 forEach처럼 작동하지만 객체에선 원래 사용할 수 없음 내장되어 있기 때문에 가능한 것)
• 데이터를 받아오면 products에 아직 id가 없기 때문에 전개구문으로 products 데이터를 풀어서 doc : id를 넣어 위에 선언한 배열에 담아 반환해 주면 된다(문서 id는 필수가 아니기 때문에 꼭 넣어줄 필요는 없다)