개발일지(일간)/리액트 (1) 썸네일형 리스트형 무한 스크롤 구현 react로 작성중인 프로젝트중 스크롤이 화면 끝에 도달했을때, 추가적으로 데이터를 더 로딩하는 무한 스크롤 방식을 구현해야 해서 구현해 보았다. 대상 데이터는 페이징 처리 돼서 반환이 되는 데이터이고, 이를 처리하기위해 useState를 이용해 변수를 선언했다.현재 페이지가 몇 번째 페이지인지 알기 위해 page를 선언하고, 페이지가 끝에 도달했는지 알기 위한 용도로 totalPage를 선언해 주었다. aysnc와 await를 사용해 비동기 처리를 해주고, useEffect를 통해 page의 상태가 변경될때마다 fetchProducts를 통해 페이지 데이터를 요청하도록 했다. 그리고 이벤트 리스너를 통해 스크롤 위치를 체크할수 있게 하고, 이를 useEffect의 의존성을 [page,totalPag.. 이전 1 다음