Redux- search page Scroll 제어하기(무한 scroll down)

Redux를 활용하여 Scroll을 일정 위치를 도달 했을 때, api call을 하면서 data를 받아와 render 시켜주는 기능을 구현했다. scroll이 최종하단에 도달했을 때, api call을 요청 하도록 했다.

(search api는 github api docs를 활용 link: docs.github.com/en/rest/reference/search)

 

search를 하는 곳에 useEffect를 걸어서 window.innerHeight + documen.documentElement.scrollTo 값이 document.documentElement.offsetHeight 값이 같을 때, dispatch를 이용하여 addPage() 함수가 실행이 된다.

  *innerHeight은 화면의 크기를 나타낸다.

  *scrollTop은 scroll의 위치를 최상단 부터의 거리를 나타낸다.

  *offsetHeight은 페이지의 전체 높이 값을 나타낸다.

 

scroll을 내렸을 때, console을 값을 확인 해보면 innerHeight + scrollTop === offsetHeight 같으면 console 값이 나온다.

클릭하면 gif 실행 됩니다.

 

api call을 하는 과정

 *글자수가 3자 이상이 되면 getRepositories()가 실행이 된다.

 *thunk가 실행이 되면서 request가 되고, searchRepo가 실행이 된다.

 *searchRepo가 실행이 되면, converQueryParams 함수가 실행 되면서 url을 완성 시킨다.

 *url이 완성이 되면, fetch가 실행 되면서 api call을 하게 된다. result message가 있으면 fetch에서 오류가 발생했다는 것이고, fetch의 error 있으면 error을 return 한다. 없으면 data를 return을 시켜준다.

 *api 요청이 완료되면 결과가 있다(error 있으면 failGetRepo가 실행이 될것이고, 아니면 getRepo가 실행된다.) 어쨋든 결과가 있기 때문에 isLoading값을 false로 바꿔주고, error든 data든 reducer에서 값을 넣어준다.

 *data를 제대로 받아 왔다면, data 값을 getRepo로 전달을 해주고 getRepo를 통해서 reducer에서 addMoreData함수가 실행된다.

 *page가 1이면 30개 데이터만 들어가고 page가 2면 기존 data에다가 concat으로 data를 추가하고 중복되지 않는 값만...

 

getRepositories

 

getRepositories 함수 (thunk)

reducer

searchRepo 함수 (search API)

convertQueryParams 함수

SearchAPI Action

addMoreData 함수

addPage 함수는 api call을 요청할 때 page를 나타낸다. api 문서를 읽어보면 1 page 당 보내주는 data의 수는 30개이다. 그래서 page를 증가 시켜서 추가 데이터를 받아 오도록 했고, 그 data를 기존에 데이터에 추가를 할 수 있도록 했다.

 

reducer의 page의 초기 값으로 page: 1을 주었다. 그리고 나서 dispatch가 실행이 되면 reducer에서 page를 1 추가했다. page가 추가 되면 위에서 실행됐던 함수들이 또 실행이 된다.

 

 

 

위와 같이 작성하고, 데이터를 받아오는 과정을 실행을 시켜보면...

클릭하면 gif 실행 됩니다.

문제점 : 추가로 api call을 하고 나서 scroll 위치가 상단으로 간다. 현재 위치를 지킬때도 있고, 상단으로 올라 갈때도 있다. 현상이 똑같지가 않다.

 

*4/11 추가내용

Facebook React Korea에 문의를 했을 때, 루트엘리먼트에 overflow 속성 때문에 circle progress가 실행 될 때 스크롤바가 사라지는 원인이었다. circle progress를 material ui에서 가져와서 사용했고, circle progress를 material ui에서 제공해주는 modal 기능을 이용했었다. modal 대신 div 태그위에 circle progress를 실행 했더니, 스크롤바가 사라지지 않는 것을 확인 했으며, modal 아닌 다른 태그를 사용해서 custom이 필요해 보인다.