[내일배움캠프 WIL] 10주차

오늘 새로 배운 것

무한 스크롤 구현

const loadMore = async () => {
    
};
...

<FlatList
...
onEndReachedThreshold={0.5}
onEndReached={loadMore}
...
/>

onEndReachedThreshold
얼마나 먼저 미리 fetch 할 것인지 설정

onEndReached
실제로 fetch를 해주는 함수

무한스크롤을 간단하게 구현할 수 있도록 해주는 useinfiniteQuery는 인자로 쿼리 키, fetcher 함수, 옵션 객체를 받는다.

새로고침을 하거나 처음 컴포넌트가 마운트 됐을 때 fetcher 함수가 실행되는데, fetcher 함수는 pageParam을 담은 객체를 매개변수로 넘겨주며 fetch 요청을 한다. 그리고 옵션에 getNextPageParam에서 lastPage의 page가 총 page 수보다 적은 동안 lastPage의 page는 +1을 해서 return을 해준다. 리턴 값은 pageParam으로 들어간다. 이 결과값으로 pageParams와 해당 페이지 내부의 정보를 담은 pages 라는 각각 배열 형태의 속성을 가진 객체를 data로 받게 된다.

//As is
const {
    data: upcomingData,
    isLoading: isLoadingUC,
    // refetch: refetchUC,
  } = useQuery(['Movies', 'Upcoming'], getUpcoming);

//To be
const {
   fetchNextPage, 
   hasNextPage, 
   isFetchingNextPage, 
   data 
 } = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
   getNextPageParam: (lastPage) => {
		 if(lastPage.page < lastPage.total_page) {
				return lastPage.page + 1;
		 }
	 }
 })

공공 API를 이용해 공공데이터를 잘 받아왔는데 왜 화면에 렌더링이 안될까?

만났던 에러들

There was a problem sending log messages to your development environment [PrettyFormatPluginError: value.hasOwnProperty is not a function. (In 'value.hasOwnProperty('tag')', 'value.hasOwnProperty' is undefined)]

possible unhandled promise rejection(id :)

TypeError: undefined is not an object (evaluating 'rawData.pages')

결국 fetch가 아닌 axios.get을 사용하여 리턴해서 값을 어찌어찌 받아오긴 했지만 그다음 진짜 문제는 처음에는 값이 undefined로 들어오다가 나중에 값이 들어오는데 이 첫 undefined값 때문에 error가 나서 다시 fetch를 하지 않는 문제가 있다.

if(!isLoading)이 true일 때 렌더링을 하도록 리턴하는 방법으로 해결하긴 했지만 근본적인 해결책인지는 잘 모르겠다.