무한 스크롤 개발을 하게 되었습니다 !
한 파일 내에서 axios로 받은 데이터를 무한 스크롤로 만드는 페이지입니다.
우선, 변수들부터 살펴보겠습니다.
변수
1. result는 렌더링할 데이터들을 담을 state입니다.
2. item은 처음에 axios를 통해서 모든 데이터들을 담을 변수 입니다.
3. isLoading은 로딩 시 true/false를 통해 데이터를 받아왔는 지 판별하는 변수입니다.함수
1. fetchMoreData
스크롤 시에 데이터를 추가적으로 받아오는 함수입니다.
저는 20개씩 커팅하기로 결정해서 20개씩 slice해줬습니다.
호출하여 20개씩 커팅할때마다 원본 데이터인 item 또한 20개씩 줄여줌으로써 불러오는 데이터의 양을 최소화 시키고 싶었습니다.
2. infiniteScroll
무한스크롤함수입니다.
아래 사진을 보시면
clientHeight = 사용자가 지금 보는 높이
scrollTop = 사용자가 보는 페이지와 원래 페이지의 최상단과의 차이
scrollHeight = 화면의 높이값
저는 일부러 화면 높이값을 -100해줘서 어느정도 내려오면 바로 데이터를 받아오게끔 작성하였습니다.
사용자 입장에서 대기시간을 최소화 하고 싶어서 이렇게 하였습니다 !
참고자료 : https://javascript.info/size-and-scroll
useCallback : https://ko.reactjs.org/docs/hooks-reference.html#usecallback
2. getFetchData
처음에 useEffect() 통해 호출하는 데이터를 넣어주는 함수입니다.
let response 변수에 axios를 통해 받아온 데이터를 저장해주고 해당 데이터에서 20개만 먼저 result state에 저장합니다. 이후 저장한 20개를 떼어내고, item state에 남은 데이터들을 저장해주는 방식입니다.
위의 방식을 통해서 최대한 api통신을 간소화하였습니다.
3. useEffect
useEffect는 총 두개를 사용하였습니다.
첫 번째 useEffect는 데이터를 처음에 받아오기 위해서 deps에 아무것도 넣지않고 1회 실행시켰습니다.
두 번째 useEffect는 scrollEvent 부착을 위해 _infiniteScroll을 deps로 넣고 실행하였습니다.
