[10일차] 무한스크롤 사진(🛠️~ing)

무한스크롤 사진이 계속 반복된다는 걸 깨달았다.

//src/api/axios.ts
import axios, {
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosError,
  HttpStatusCode,
} from 'axios';

export const getPhotosPage = async (pageParam = 1, options = {}) => {
  const response = await axios.get('/api', {
    params: {
      query: 'ed sheeran',
      display: 20,
      filter: 'large',
      sort: 'date',
      start: `${pageParam}`,
    },
    headers: {
      'X-Naver-Client-Id': import.meta.env.VITE_NAVER_CLIENT_ID,
      'X-Naver-Client-Secret': import.meta.env.VITE_CLIENT_SECRET,
    },
  });
  console.log('response', response.data.items);
  return response.data.items;
};

//src/hooks/usePhotos.ts
import { useState, useEffect } from 'react';
import { getPhotosPage } from '@src/api/axios';

const usePhotos = (pageNum = 1) => {
  const [results, setResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [error, setError] = useState({});
  const [hasNextPage, setHasNextPage] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    setIsError(false);
    setError({});

    const controller = new AbortController();
    const { signal } = controller;
    getPhotosPage(pageNum, { signal })
      .then((data) => {
        setResults((prev) => [...prev, ...data]);
        console.log(pageNum);
        setHasNextPage(Boolean(data.length));
        setIsLoading(false);
      })
      .catch((e) => {
        setIsLoading(false);
        if (signal.aborted) return;
        setIsError(true);
        setError({ message: e.message });
      });

    return () => controller.abort();
  }, [pageNum]);
  return { isLoading, isError, error, results, hasNextPage };
};
export default usePhotos;

페이지가 넘어가지 않아 생기는 문제인가? 라고 생각해 page번호를 콘솔에 찍어보았으나 페이지는 잘 넘어가고 있었다. 네트워크로 확인해봐도 start번호는 계속 바뀌고 있었다. 근데 왜 사진은 계속 반복되는 거지?

이미지 API를 제공받은 네이버 개발자 센터에도 들어가봤으나, 21년 이후로는 더이상 답변을 작성해주지 않는듯했다. ( 둘러보던 중, 개인적으로 궁금했던 내용 - 네이버 초록창에 검색할 때 나오는 이미지랑 네이버 이미지 API가 제공해주는 사진의 결과물이 다른 이유에 대해 질문을 남긴 사람이 있었으나, 답변은 없었다...)

혹시 total 개수가 너무 적어서(221개였다) 그렇게 보이는 건가? 싶어 한 번에 보여줄 수 있는 개수인 display를 10개로도 수정해보았으나, 앞에서 렌더링되었던 그 10개가 계속 다시 나오는 것 같다. 나오는 것 같다는 이유는 특정한 몇 개는 계속 반복되고, 몇 개는 이상하게 또 새로운 게 나온다. 도저히 이유를 모르겠다.

이것도 해보고, 저것도 해보다가 일단은 display 최대숫자인 100으로 구현해놓는 걸로 마무리했다. 찜찜해서 일단 계속 수정해나갈 생각이다.

오늘의 내 심경: