[개발] chat GPT 를 이용한 React Load More 기능 개발

안녕하세요 @realmankwon 입니다.

최근에 개발한 Earn 기능의 history 및 UPVU history에 load more 기능을 추가하려고 합니다.
기존의 소스가 있기는 한데 해당 소스에 버그가 있더군요.
그래서 별도의 로직으로 개발을 하려고 구글링을 하려다가 최근 유행하는 chat gpt에게 한번 물어보았습니다.

처음에는 간단하게 react load more source 라고 입력했었는데 db를 사용하지 않는 아주 간단한 소스를 알려주더군요.
몇 번의 검색 끝에 react load more combobox change 라고 입력하니 다음과 같이 멋진 소스를 알려 주었습니다.

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

const LIMIT = 10;

const LoadMore = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [items, setItems] = useState([]);
  const [offset, setOffset] = useState(0);
  const [count, setCount] = useState(LIMIT);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(`/api/data?limit=${count}&offset=${offset}&selectedValue=${selectedValue}`);
      const data = response.data;
      setItems((prevItems) => [...prevItems, ...data]);
      setHasMore(data.length === count);
    };
    fetchData();
  }, [offset, count, selectedValue]);

  const handleLoadMore = () => {
    setOffset((prevOffset) => prevOffset + count);
  };

  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
    setOffset(0);
    setItems([]);
  };

  return (
    <div>
      <select value={selectedValue} onChange={handleSelectChange}>
        <option value="">All</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      {hasMore && <button onClick={handleLoadMore}>Load More</button>}
    </div>
  );
};

export default LoadMore;

이 소스를 바로 적용할 수는 없지만 버그가 발생할 수 있는 부분에 대해서 찾게 된 것 같습니다.
한번 적용을 해봐야겠네요.