TIL62-01 무한 스크롤

useInview를 활용한 무한 스크롤

• 무한 스크롤에는 여러 방법이 있겠지만 그 중 useInview hook을 사용해 무한스크롤을 구현해봤다.
• useInview hook을 사용하기 위해선 다음의 라이브러리를 설치해야한다.

yarn add react-intersection-observer

예시 코드

• 다음은 useInview hook을 사용해 무한스크롤을 구현한 예시 코드이다.

function Tag() {
    let { id } = useParams();
    const page = useRef(1);
    const [ref, inView] = useInView();
    const dispatch = useDispatch();
    const data = useSelector((state) => state.gettingRadioCategory);

    useEffect(() => {
        dispatch(__getCategoryRadio({ categoryType: id, page: page.current }));
    }, []);

    useEffect(() => {
        if (inView) {
            page.current += 1;
            dispatch(__getCategoryRadio({ categoryType: id, page: page.current }));
        }
    }, [inView]);
  
  //---코드 중략---//
  
    return (
        <>
 //--- 코드 중략 ---//
            <StRadioContainer ref={radioContainerRef}>
                {data?.radio.map((item, index) => {
                    return <RadioContainer radio={item?.data} key={index} />;
                })}
                <div ref={ref}>
                    <p>마지막 페이지 입니다.</p>
                </div>
            </StRadioContainer>
            )}
        </>
    );
}

• useInView는 현재 화면에서 해당 엘리먼트가 보이는지 여부를 감지한다. 따라서, 이 코드에서는 무한스크롤이 되어야 할 위치에 해당하는 엘리먼트에 useInView hook을 적용하고, 해당 엘리먼트가 화면에 보이면 useEffect를 사용하여 새로운 데이터를 불러오는 로직을 실행한다.

• 무한스크롤을 구현하기 위해서는 일반적으로 page라는 변수를 사용하여, 현재 보여지는 페이지 번호를 추적하고, 해당 페이지 번호를 기반으로 새로운 데이터를 불러오는 것이 필요하다.

• 이 코드에서도 page 변수를 useRef를 사용하여 선언하고, useEffect를 사용하여 해당 페이지 번호를 기반으로 데이터를 불러오도록 구현되어 있다.

• 이를 통해, 사용자가 페이지를 스크롤 할 때 새로운 데이터를 자연스럽게 불러오며, 사용자 경험을 향상시키는 효과를 얻을 수 있다.