무한 스크롤

무한 스크롤 코드로 보기

import axios from "axios";
import React, { useEffect, useState } from "react";

export default function Scroll() {
  let offset = 0;
  const [poketmons, setPoketmon] = useState([]);

  const loadMorePokemon = async () => {
    const fetched = await axios(
      `https://pokeapi.co/api/v2/pokemon?limit=10&offset=${offset}`
    );
    const newPokemon = [];
    fetched.data.results.map((p) => newPokemon.push(p.name));
    setPoketmon((oldPokemon) => [...oldPokemon, ...newPokemon]);// 기존의 것에 새것을 붙임
    offset += 10;
  };

  const handleScroll = (e) => {
    if (// 스크롤 내린 크기+막대바 크기 +1 >= 전체창 높이, +1 하는 이유는 완전 다 내려가기전에 axios 하기위해
      e.target.documentElement.scrollTop + window.innerHeight + 1 >=
      e.target.documentElement.scrollHeight
    ) {
      loadMorePokemon();
    }
  };

  useEffect(() => {
    loadMorePokemon();
    window.addEventListener("scroll", handleScroll);// 첫 mount 됐을 때 스크롤 이벤트를 추가해준다. 그리고 더이상 시행하지 않는다.
  }, []);

  return (
    <div>
      {poketmons.map((p, i) => {
        return (
          <div
            key={i}
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              border: "1px solid black",
              width: "200px",
              height: "200px",
              fontWeight: "700",
              fontSize: "20px",
              margin: "0 auto",
            }}
          >
            {i + 1}.&nbsp;{p}
          </div>
        );
      })}
    </div>
  );
}