인프런 커뮤니티 질문&답변

Jiyeol Lee님의 프로필 이미지

작성한 질문수

React로 NodeBird SNS 만들기

무한 스크롤 관련 질문!

해결된 질문

작성

·

335

0

제 DB에 저장된 게시물은 20 ~ 30개 사이입니다. 10개씩 불러오니까 2번만 더 로드하면 되는데, 

위와 같이 throttle 안쓰고 countRef 활용하지 않아도 리퀘스트 액션이나 네트워크 탭의 post 요청 전부 2번씩만 실행 됩니다. (3번 정도 실험해보았습니다.)

제로초님 강의에서 봤던 것 처럼 여러번 중복해서 리덕스 리퀘스트 액션이 실행된다거나 그런 현상이 발생하지 않는데요. 

혹시 onScroll함수의 useCallback에서 디펜던시로 hasMorePost, mainPosts.length가 들어가 있어서 그런 것인가요?

답변 4

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네 맞습니다. takeLatest는 프론트단에서 앞서 실행된 fetchUser같은 과정을 더 이상 진행하지 않는 것이지, 기존에 보낸 서버 요청까지 취소되는 것은 아닙니다. 함수를 중간에 멈출 수 있는 이유는 제너레이터라서 가능한 것이고요. 따라서 takeLatest가 아무리 프론트에서 함수를 멈춰준다더라도 이미 서버로 요청이 간 것까지는 어떻게 할 수 없기 때문에 주의해주어야하고 throttling을 적용해주어야 합니다.

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

게시물 개수를 더 늘려보시고 스크롤을 더 빠르게 굴려보세요

0

Jiyeol Lee님의 프로필 이미지
Jiyeol Lee
질문자

제너레이터 함수라서 가능한거군요. 그래서 첫번째 yield(중단점)까지 실행(서버로 요청하는 함수 호출 파트)되는 건 막을 수 없는 거네요. 많이 배우고 갑니다. 감사합니다!!

0

Jiyeol Lee님의 프로필 이미지
Jiyeol Lee
질문자

네 빠르게 하니 LOAD_MAIN_POSTS_REQUEST가 2번 연속 가는 현상, 그리고 같은 post 요청이 중복(2번 초과되는 경우도 포함)되어 발생하는 현상도 발생하네요.

프론트단에서 리덕스 액션이 연속적으로 발생하거나 하는 부분은 takeLatest가 컨트롤하지 못한다는 것을 알겠습니다.

 takeLatest의 두번째 인자에 들어가는 함수(첫번째 인자에 반응해서 호출되는; 위의 예시에선 loadMainPosts 함수)의 경우 실행되고 있을때, 같은 액션이 한번더 실행되서 또 loadMainPosts 함수가 호출되면 그 직전에 호출되었던 loadMainPosts는 취소되는 걸로 이해는 하고 있습니다.(아래의 공식문서도 참고했습니다. 잘못 이해한거라면 바로 잡아주시길...)

그런데 같은 post요청이 서버로 여러번 갔다는 것은 어쨌든 loadMainPosts가 여러번 호출되어서 loadMainPostsAPI(post요청 보내는 함수)를 호출했다는 얘기일텐데, 아래의 설명처럼 pending task를 취소한다고 해도 이미 해당 함수가 어느정도? 까지 실행되어서 서버로 이미 요청이 갔다고 이해하면 될까요? 취소를 했지만 이미 서버로 요청은 간거고, 대신에 LOAD_MAIN_POSTS_SUCCESS 혹은 LOAD_MAIN_POSTS_FAILURE는 여러번 실행되지는 않는거죠. 이것도 제대로 이해하고 있는 것은 아닐거 같기도 한데, 정확히 알려주시면 감사하겠습니다.