infinite Scrolling 구현하기

제로초 노드버드 강의 정리 노트

 

처음부터 수백, 수천개의 데이터를 불러와서 화면에 표시하려고 하면

시간이 너무 오래걸리고 메모리도 잡아먹고,

사실 처음부터 그렇게 표시 할 필요가 없다.

 

스크롤 내릴때마다 10개씩 게시물이 나오도록 만들어보자.

 

---

 

일단 스크롤 위치를 구해야 한다.

 

scrollY : 얼마나 내렸는지(스크롤의 위치)

clientHeight: 화면 보이는 길이

scrollHeight: 총 길이 (컨텐츠의 높이)

JavaScript 스크롤 관련 : biio-studying.tistory.com/75?category=903435

 

 

다음과 같이 콘솔창에 찍어서 확인 할 수 있다.

 

scrollY가 0일 때, 611까지 화면이 보이므로,

제일 아래까지 내린 값은 scrollHeight - clientHeight(611) 이라는 것을 알 수 있다.

즉  scrollY + scrollHeight == clientHeight  이다.

 

---

reducer/post.js

먼저 state와 action, reducer를 설정해주자.

 

초기값에 hasMorePosts와 loadPosts와 관련된 state를 추가한다.

hasMorePosts가 ture이면 포스트를 더 불러들이고,

false이면 포스트를 더 가져오지 않는다.

 

(loadPosts관련 state들은 이름이 참 이상하다^^;;; 하지만 다른 state들과 통일성을 위해...)

 

 

액션타입 변수화하기

액션설정

리듀서 설정.

REQUEST : 요청을 보내면 Loading이 true.

SUCCESS : 요청받아왔으므로 Loading은 false, Done은 true.

mainPosts는 원래 포스트 뒤에 action.data를 더 가져온다.

 

현재 임시데이터를 사용하는 것이므로,

잘 작동하는지 확인하기 위해서 포스트가 총 50개가 있다고 가정했다.

 

 

---

saga/post.js

 

saga 설정

액션 REQUEST가 실행되면 loadPosts 함수를 불러온다.

아직 서버랑 연결이 안되어 있으니까 임의의 데이터를 불러와보자.

요청이 들어와 성공하면(SUCCESS),

reducer에서 만들어둔 더미데이터를 data로 불러온다.

 

---

pages/index.js

 

기능이 동작하도록 첫 시작 페이지에서 액션 실행하기

스크롤이 제일 아래쪽보다 300픽셀 위에 있을 때,

hasMorePosts가 ture이면 액션loadPosts를 디스패치한다.

 

---

하지만 이렇게 하면 문제가 있다.

Redux Devtools을 이용해 살펴보자.

스크롤한 후 리퀘스트가 여러번 가는 것을 볼 수 있다.

(제일 밑에서 300px 위에서부터 아래쪽으로 스크롤 될때까지 계속해서 요청이 간다.)

 

 

이때사용할 saga effect가 throttle이다.

throttle을 사용하면 요청이 있고나서 2초(2000)동안 같은 요청에 응답하지 않는다.

하지만 throttle 하면 2초동안 응답하지 않지만, 요청을 못받는건 아니므로(????)

2초뒤에 요청하지않아도 한 번더 응답한다.

 

 

그러므로 요청 중일 때 요청을 받지 못하도록 설정하는 것이 필요하다.

이미 설정해놓은 loadingPostsLoading을 사용하여 요청을 막아보자.

 

pages/index.js

loadingPostsLoading이 false일때만 loadPosts를 디스패치하도록 설정했다.

 

 

그 후 Redux DevTools를 확인하면 정상 작동 하는 것을 볼 수 있다.