[html] 인피니트 스크롤링

- hasMorePost와 같은 state를 만들어서 스크롤링이 마지막부분에 닿았을 때 데이터가 더 있거나 없거나 하는 것을 구분함

 

- useEffect에 window.addEventListener의 경우 return을 해줘서 이벤트를 없애줘야 메모리에 쌓이지 않음

 

- 스크롤시 알아야 할 변수

  * scrollY : 현재 스크롤 위치

  * clientHeight : 화면에서 보이는 스크롤의 길이

  * scrollHeight : 스크롤 맨 위부터 아래까지의 총 길이

  * 스크롤을 끝까지 내렸을 경우 "scrollY + clientHeight = scrollHeight"

 

- 가장 아래로 내렸을 경우 데이터를 불러오는 것이 아니라 그 전에 불러와야 사용자 경험에 좋음

 

- 스크롤링의 경우 동작이 연속으로 일어나기 때문에 적절한 조치를 취해야 함, saga에서 throttle을 사용하여 몇초에 한 번씩만 보낼 수 있도록 할 수 있으나 스크롤링이 워낙 빨라 여러번 실행되었을 경우 5초 후에 success가 취소되지 않고 모두 다시 불리어지는 문제가 있음

 

- saga의 throttle이나 takeLatest의 경우 request가 여러번 전송되는 것을 막는것이 아니라 응답이 한 번만 오도록 하는 것, 처음에 request를 보낼 때 한 번만 갈수 있도록 조건을 정해줘야 함

 

- loadPostLoading과 같은 state를 사용하여 request를 한 번만 보낼 수 있음, request시 true가 되므로 false때만 request를 보내고 request가 되자마자 보내지 못하도록 막아둬야 함

 if (hasMorePost && !loadPostsLoading) {
    dispatch(loadPostsRequest());
 }