TIL_flatMap, NextJs_react-daum-postcode

import { useInfiniteQuery } from "react-query";
import { getDogImg } from "@/app/api/api";

export const useGetDogImgQuery = () => {
  const {
    isLoading,
    isError,
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    ...rest
  } = useInfiniteQuery("getDog", getDogImg, {
    getNextPageParam: (lastPage) => lastPage.nextPage,
    refetchInterval: false,
    staleTime: Infinity,
    //캐시 된 데이터를 먼저 보여주고 Fetching이 끝난다음 데이터를 업데이트
    keepPreviousData: true,
  });

  const dogData = data?.pages.flatMap((page) => page.data);
  console.log(data);
  console.log(data?.pages);
  console.log(dogData);
  return {
    isLoading,
    isError,
    data: dogData,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    ...rest,
  };
};

dogImg를 가져오는 get 하는 react-query 코드.
무한 스크롤 적용 중 헷갈리는 부분 정리!

console.log에
1. data
2. data?.page
3. dogData
가 있는데,

순서대로 데이터의 형식. 내가 필요한 부분은 pages 안에 있는 data라는 항목

한 개의 배열로 이루어져있고, 배열안에는 객체, data는 해당 객체의 key로 있는 모습

그래서, pages의 요소들 각각의 값에 매핑해줘야한다. ( 무한 스크롤로 데이터가 늘어나면, pages의 index 값도 늘어남 )

data?.page에서 data에 ?는 체이닝 연산자다.
이건 객체 속성에 접근할 때 그 속성이 존재하지 않을 수 있음을 나타낸다.

따라서 data?.page는, 객체가 있으면 pages 속성에 접근하고, 존재하지 않으면 undefined를 반환한다.

만약 data가 null 또는 undefined인 경우에도 Undefined를 반환한다.

data에 객체 속성이 있어 data.pages로 접근한 모습을 보면,
각 요소 안에 data, nextPage 옵션이 있는걸 볼 수 있다.

flatMap은 쉽게 말해서, map한 요소를 flat으로 정렬했다고 이해하면 쉽다.

 const dogData = data?.pages.map((page:{data: DataType[], nextPage:number}) => page.data).flat();
  console.log(data);
  console.log(data?.pages);
  console.log(dogData);

  interface DataType {
    id: string;
    url: string;
  }

  interface DogData {
    pages: {
      data: DataType[];
      nextPage: number;
    }[];
  }

dogdata의 타입을 임의로 ts로 정의해봤다.