무한스크롤 리트라이 3일차

어떻게 저떻게 무한스크롤을 구현하고 새로운 데이터를 가져올 때마다 로딩 gif를 추가해보기로 했습니다.

아!

공고에서 무한스크롤 하고 나면 협업 카테고리로 넘어왔을 때 공고쪽의 데이터가 하나씩 자꾸 추가되는데 어디가 문제인지 모르겠음. 코드 뜯어서 분석해봐야할 듯 싶습니다. 으악

const [isLoading, setIsLoading] = useState(false);

이렇게 로딩중인지 아닌지 구분할 수 있는 상태를 선언하고 api 요청 전에 isLoading 을 true로 바꾸고 api 요청이 성공적으로 마무리되면 다시 isLoading 을 false로 바꾸도록 하였습니다.

useEffect(() => {
    if(isEightUnder){
      return;
    }
    const showPageCommu = async () => {
      setIsLoading(true);
      try {
        const response = await axios.get(`https://api.portfolly.site/boards/pages?division=${division}&page=${page}&size=${size}`);
        const currentData = response.data.data;
        console.log(currentData);
        setData([...data, ...currentData]);
        setIsLoading(false);
        if (currentData.length < 8) {
          setIsEightUnder(true);
          return;
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    if(page > 1){
      showPageCommu();
    }
  }, [page]);

위와 같이 코드를 작성하니 새로운 데이터를 부르는 스크롤 마다 적용되는 것을 확인했으나 로딩 이미지가 유지되는 시간이 너무 짧음을 확인했습니다. 적어도 1초를 유지하면 좋을듯 싶은데 해당 방법을 찾아봐야겠습니다!
(지금은 거의 뭐 로딩이미지의 ㄹ 수준)

저는 gif를 다운받아서 사용했지만 react-spinners라는 라이브러리도 있으니 참고하면 좋을 듯 싶습니다.

---

참고자료 - 리액트 로딩화면