Til (2023.02.24)

ChatGPT무한 스크롤

 

chatGPT가 재밌어 보여서 질문을 조합해 게임 api사이트 하나를 이용한 무한 스크롤을 구현해 봤다.

gpt에 질문할때는 자세하게 원하는 정보와 원하는 부분을 말하는게 더 정확한 정보를 주는 것 같았다.

실행했을때 검색도 잘되고, 무한스크롤도 잘 작동한다. 이미지와 제목도 잘 불러와졌다.

아래코드는 거기서 내가 변형해 steam안에있는 게임만 검색결과로 나오게 한 것이다.

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

interface Game {
  external_games: any;
  id: number;
  name: string;
  background_image: string;
}

const GameSearch = (): JSX.Element => {
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [games, setGames] = useState<any>([]);
  const [page, setPage] = useState<number>(1);
  const [steamId, setSteamId] = useState<any>();

  const fetchGames = async (): Promise<void> => {
    const response = await axios.get(
      `https://api.rawg.io/api/games?key=212ed5f02b3040e8a0c27dd8d8f06486&page=${page}&search=${searchTerm}`
    );
    const data = response.data.results as Game[];
    setGames((games: any) => [...games, ...data]);
    setPage((page) => page + 1);
  };
  console.log(steamId);
  const aaa = games.filter((i: any) => {
    return i?.stores && i?.stores[0].store.name === "Steam";
  });
  console.log(aaa);

  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>): void => {
    setSearchTerm(event.target.value);
    setGames([]);
    setPage(1);
  };

  useEffect(() => {
    fetchGames();
  }, [searchTerm]);

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />

      <InfiniteScroll
        dataLength={games.length}
        next={fetchGames}
        hasMore={true}
        loader={<h4>Loading...</h4>}
      >
        {aaa.map((game: any) => (
          <div key={game.id}>
            <h2>{game.name}</h2>
            <img src={game.background_image} alt={game.name} />
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default GameSearch;