Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`.

[warning 분석]

InfiniteScroll 관련 코드를 작성하던 중 마주친 경고인데 자식이 필요한데 undefined일 때의 예외 처리를 해주지 않았다.

[기존 코드]

const initialUrl = `https://swapi.dev/api/people/`;

const fetchUrl = async ({ pageParam = initialUrl }) => {
  const response = await axios(pageParam);
  return response;
};

const InfinitePeople = () => {
  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
    queryKey: ['sw-people'],
    queryFn: fetchUrl,
    getNextPageParam: (lastPage) => lastPage.next || undefined,
  });
  
  return (
    <InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
      {data?.pages?.map((pageData) =>
        pageData?.data?.results?.map((person) => (
          <Person
            key={person.name}
            name={person.name}
            hairColor={person.hair_color}
            eyeColor={person.eye_color}
          />
        ))
      )}
    </InfiniteScroll>
  );
};

export default InfinitePeople;

[isLoading, isError, error를 이용하여 예외처리 추가]

데이터가 없을 경우의 예외처리를 지정해서 경고 해결.

...
return (
  <>
  	{isLoading && <div className='loading'>Loading...</div>}
    {isError && <div>Error! error Message: {error.toString()}</div>}
    <InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
      {data?.pages?.map((pageData) =>
        pageData?.data?.results?.map((person) => (
          <Person
            key={person.name}
            name={person.name}
            hairColor={person.hair_color}
            eyeColor={person.eye_color}
          />
        ))
      )}
    </InfiniteScroll>
   </>
  );
...