infiniteScroll 기법

무한 스크롤(Infinite Scroll)은 웹사이트나 앱에서 사용자가 페이지 끝까지 스크롤하면 자동으로 새로운 컨텐츠를 추가로 로드하는 기법입니다. 이는 사용자 경험을 향상시키며, 사용자가 페이지를 새로고침하거나 다른 페이지로 이동하는 번거로움을 줄입니다. 

 

무한 스크롤을 구현하는 기본적인 방법

1. 데이터 로드: 먼저 서버에서 데이터를 비동기적으로 가져와야 합니다. 이를 위해 Fetch API나 Axios 등의 라이브러리를 사용하거나, XMLHttpRequest 객체를 직접 사용할 수 있습니다. 이 데이터는 일반적으로 JSON 형식입니다. 

2. 스크롤 감지: 사용자가 페이지 끝까지 스크롤했는지 감지해야 합니다. 이를 위해 JavaScript의 스크롤 이벤트를 사용하고, 페이지 끝에 도달했는지 확인하기 위해 window 객체의 scrollY, innerHeight, document.documentElement.offsetHeight 등의 속성을 사용할 수 있습니다. 

3. 데이터 추가: 스크롤이 페이지 끝에 도달하면, 새로운 데이터를 추가로 로드하고 페이지에 추가합니다. 이를 위해 DOM 조작 메서드를 사용할 수 있습니다.

 

let page = 1; // 현재 페이지
const limit = 10; // 페이지당 아이템 수

// 스크롤 이벤트 리스너
window.onscroll = function() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // 페이지 끝에 도달하면 추가 데이터 로드
        loadData();
    }
};

// 데이터 로드 함수
function loadData() {
    fetch(`/items?page=${page}&limit=${limit}`)
        .then(response => response.json())
        .then(data => {
            // 데이터를 사용해 DOM 업데이트
            data.items.forEach(item => {
                const element = document.createElement('div');
                element.textContent = item.content;
                document.body.appendChild(element);
            });

            // 페이지 증가
            page++;
        });
}

// 초기 데이터 로드
loadData();

이 코드에서는 fetch를 사용해 비동기적으로 데이터를 로드하고 있습니다. 이는 서버가 /items라는 엔드포인트를 제공하고 있으며, 

이 엔드포인트가 페이지와 아이템 수를 매개변수로 받아 데이터를 반환한다고 가정한 것입니다. 

이렇게 인피니트 스크롤은 웹페이지에 동적인 요소를 추가하면서 동시에 사용자 경험을 향상시킬 수 있습니다.

 

react-infinite-scroll-hook

const PokeCardList = () => {
  const [pokemons, setPokemons] = useState<PokemonListReponseType>({
    count: 0,
    next: '',
    results: []
  })

  const [infiniteRef] = useInfiniteScroll({
    loading: false,
    hasNextPage: pokemons.next !== '',
    onLoadMore: async () => {
      const morePokemons = await fetchPokemons(pokemons.next);

      setPokemons({
        ...morePokemons,
        results: [...pokemons.results, ...morePokemons.results]
      })
    },
    disabled: false,
    rootMargin: '0px 0px 400px 0px',
  });

  useEffect(() => {
    (async () => {
      const pokemons = await fetchPokemons();
      setPokemons(pokemons);
    })()
  }, [])

  return (
    <List>
      {
        pokemons.results.map((pokemon, index) => {
          return (
            <PokeCard key={`${pokemon.name}_${index}`} name={pokemon.name} />
          )
        })
      }
      {(
        <Loading ref={infiniteRef}>
          Loading 
        </Loading>
      )}
    </List>
  )
}

export default PokeCardList;

 

 

https://www.npmjs.com/package/react-infinite-scroll-hook

react-infinite-scroll-hook

https://onderonur.github.io/react-infinite-scroll-hook/

React Infinite Scroll Hook