무한스크롤(infiniteScroll) 사용하는 방법

😶‍🌫️infiniteScroll

무한 스크롤이란? 페이지에서 스크롤을 내리고 다음페이지로 이동하려고할때 페이지이동이나 버튼을 눌러서 넘기는게아닌
스크롤만 내리면서 다음 화면들이 나오는걸 말합니다!

무한 스크롤은 특히 소셜 미디어 피드(예: Facebook, Twitter, Instagram), 뉴스 웹사이트, 온라인 상점 등에서 많이 사용됩니다. 사용자들은 스크롤을 내리면서 새로운 게시물, 뉴스 기사, 상품 등이 자동으로 추가로 로드되어 화면에 표시됩니다.

👚무한스크롤의 장점

1. 최신기술에 특화되어있다

트랜디하고 인기있는 웹,앱 사이트들이 많이 사용하기 때문에 지속적인 업데이트도 이루어지고 모바일로도 쉽게 접근이 가능해서 사용하기 편하고, 트랜디한 기술을 쓸수있다

2.사용자 편의성

무한 스크롤은 사용자들이 페이지를 끊임없이 스크롤하여 새로운 콘텐츠를 볼 수 있게 해줍니다.

페이지 이동 버튼을 누르거나 페이지를 새로고침할 필요가 없으므로 사용자들이 더 편리하게 콘텐츠를 탐색할 수 있습니다.

3.빠른 콘텐츠 로딩

무한 스크롤은 사용자가 스크롤을 내리는 동안 필요한 콘텐츠를 동적으로 로드합니다.

전체 페이지를 로드하는 것보다 부분적인 콘텐츠 로딩이 더 빠르기 때문에, 사용자들은 빠르게 웹사이트의 콘텐츠를 확인할 수 있습니다.

💥무한스크롤의 단점

1.사용자 발견성 저하

무한 스크롤은 새로운 콘텐츠가 자동으로 로드되기 때문에 사용자들이 어디까지 스크롤을 내려야 페이지의 끝을 인식하는지 알기 어렵습니다.

사용자들이 원하는 콘텐츠를 찾기 위해 계속해서 스크롤을 하거나, 이전으로 돌아가는 것이 불편할 수 있습니다.

2. 메모리 부담

무한 스크롤은 사용자들이 스크롤을 계속해서 내릴 때마다 콘텐츠를 동적으로 로드하므로,

사용자의 브라우저에서 많은 메모리를 소비할 수 있습니다. 특히 많은 양의 콘텐츠가 로드되는 경우에는 브라우저의 성능에 영향을 미칠 수 있습니다.

3. 특정 요소를 찾기 어렵다

페이지네이션으로 구현했을때는 콘텐츠를 기억해서 찾아낼수있는데 스크롤을 계속 내리다보면 특정위치를 기억하는데 약간의 어려움이있습니다.

😎리액트코드

포켓몬Go🕵️ 유행이어서 간단하게 포켓몬들을
가져오는 API호출하고 포켓몬이미지와 포켓몬이름을
무한스크롤로 볼수있게 코드를 만들어봤습니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import InfiniteScroll from 'react-infinite-scroll-component';

const PokemonList = () => {
  const [pokemonList, setPokemonList] = useState([]);
  const [nextUrl, setNextUrl] = useState('https://pokeapi.co/api/v2/pokemon');

  const fetchPokemon = async () => {
    try {
      const response = await axios.get(nextUrl);
      const results = response.data.results;
      const newPokemonList = await Promise.all(results.map(async (pokemon) => {
        const res = await axios.get(pokemon.url);
        return {
          name: pokemon.name,
          image: res.data.sprites.front_default
        };
      }));
      setPokemonList([...pokemonList, ...newPokemonList]);
      setNextUrl(response.data.next);
    } catch (error) {
      console.error('Error fetching Pokemon:', error);
    }
  };

  useEffect(() => {
    fetchPokemon();
  }, []); // 최초 로드 시 한 번만 실행

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1>Pokemon List</h1>
      <InfiniteScroll
        dataLength={pokemonList.length}
        next={fetchPokemon}
        hasMore={!!nextUrl}
        loader={<h4>Loading...</h4>}
        scrollThreshold={0.9}
      >
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {pokemonList.map((pokemon, index) => (
            <li key={index}>
              <img src={pokemon.image} alt={pokemon.name} style={{ width: '100px', height: '100px', marginRight: '10px' }} />
              {pokemon.name}
            </li>
          ))}
        </ul>
      </InfiniteScroll>
    </div>
  );
};

export default PokemonList;