[React] 기존 데이터에서 API Fetching 후(더보기 버튼 클릭 후) 새로 불러온 데이터 합치는 방법 / 더보기 버튼 페이지네이션

 

Intro 

안녕하세요. 이번 시간에는 React에서  기존 데이터에서 더보기 버튼 클릭 후 새로 불러온 데이터 합치는 방법에 대해 알아보겠습니다. 

 

공지사항 목록 조회 기능을 구현하던 도중 리스트가 많아질 수 있을 것 같아 더보기 버튼 UI를 추가하기로 결정했습니다. 참고로 API는 스프링부트의 Pageable 를 사용했습니다. 즉 기존 데이터에서  더보기 버튼 UI를 클릭할 때마다 page 가 +1 씩 증가하면서 새로 불러온 데이터를 화면에 보여줘야 했습니다. 

 

How to implement

아래와 같이 NoticeList 컴포넌트가 있다고 가정해봅시다. fetchNotice라는 함수를 불러올 때마다, 기존 데이터에 새로 불려진 데이터를 추가해줘야 합니다. 하지만 위 코드에서는 새로 불려진 데이터만을 setNoticeList를 통해 저장해주고 있습니다. 

function NoticeList() {
  const [noticeList, setNoticeList] = useState([]);

  const request = `https://api/v1/notices`;

  const fetchNotice = async () => {
    try {
      const response = await axios.get(request);
      const responseResult = response.data;
      setNoticeList(responseResult.items);
    } catch (error) {
      console.log(error.message);
    }
  };

  useEffect(() => {
    fetchNotice();
  }, []);

  return (
    <>
      <div className="m-8">
        <NoticeCard notices={noticeList} />
        <button
          onClick={fetchNotice()}
        >
          더보기
        </button>
      </div>
    </>
  );
}

export default NoticeList;

 

이 동작은 저희가 원하는 게 아닙니다. 기존 데이터에 새로 불려진 데이터를 추가하기 위해서는 setNoticeList (responseResult.items); 대신에 아래의 코드를 활용하시면 됩니다. 

setvideoList((oldData) => [...oldData, ...responseResult.items]);

 

Using the State Hook

state hook을 활용한 예제라고 할 수 있습니다. 

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

---

https://stackoverflow.com/questions/73526551/how-to-load-more-data-as-a-result-of-button-click-for-data-fetching-that-require

https://reactjs.org/docs/hooks-reference.html#usestate:%7E:text=be%20skipped%20completely.-,Note,more%20suited%20for%20managing%20state%20objects%20that%20contain%20multiple%20sub%2Dvalues.,-Lazy%20initial%20state