Dnote 6 - 1. React - 무한 스크롤링 기능 구현.

killi8n·2018년 9월 23일
0

Dnote

목록 보기
14/15
post-thumbnail

이제 무한 스크롤링 기능을 구현해 보겠습니다.

무한 스크롤링은 브라우저가 아래에 닿았을때, 저희가 마지막으로 보여주는 노트 아이템의 id를 기준으로 다음 10개의 노트 아이템들을 받아올 예정입니다.

NoteContainer에 다음을 추가해주겠습니다.

containers/NoteContainer.js

일단 스크롤링을 해야하므로 노트들을 20개정도 추가해주세요.

그리고 스크롤링해서 바닥에 닿으면 console에 로그가 찍힙니다.

그러면 이제 바닥에 거의 닿았을때, 더 많은 노트를 가져오는 API를 작성한후, redux처리를 해서 기능을 구현해야 합니다.

장고쪽으로 다시 돌아와주세요.

notes/views.py

notes/urls.py

url: /api/notes/next/{id}/

이렇게 되면 url의 id를 바탕으로 작성자의 노트중 id 이후의 10개를 가져옵니다.

그럼 이제 API작업은 끝났으니, 다시 리액트로 돌아와서 무한스크롤링을 마저 구현해보겠습니다.

redux의 notes모듈에서 더 받아오기 epic을 추가해주겟습니다.

modules/notes.js

modules/index.js

containers/NoteContainer.js

이렇게 되면 바닥에 닿았을때, 0.75초 간격으로 가져오게 됩니다.

중복 받아오기를 방지하기 위하여 isLoading이거나, isLast일때에는 받아오지 않게 설정해놓았습니다.

자 이제 로딩 뷰를 보여줘야겠죠?

위와같은 모듈을 받아줍니다.

잘 만들어진 로딩뷰를 보여주는 모듈입니다.

그리고 LoadingView 컴포넌트를 다음과 같이 만들어줍니다.

components/notes/LoadingView/LoadingView.js

components/notes/LoadingView/LoadingView.scss

components/notes/LoadingView/index.js

이 컴포넌트를 컨테이너에 반영합니다.

containers/NoteContainer.js

오 이제 로딩뷰도 보여지고, 무한 스크롤링이 아주 잘됩니다.

근데 한가지 문제점이 남아있죠~ 바로 isLast가 아닌 상태에서 즉, 10개만 받아왔다고 가정하고, 나머지 10개가 남아있다는 상황에서 위에서부터 삭제를 하면 10개는 모두 사라지지만, 나머지 10개가 받아와지지 않습니다.

이 문제를 해결하기 위해 다음과 같이 변경해줍니다.

containers/NoteContainer.js

지웠을때, 남아있는 스크롤의 높이가 100보다 작아지면 만약 isLast가 아니라면 더 받아오는 형식입니다.

그러나 이렇게 했을때에도 버그가 있습니다.

엄청나게 빨리 눌렀을때에 로딩이 되는도중에도 삭제가 진행되기 때문인데요.

이 버그를 고쳐보겠습니다.

containers/NoteContainer.js

유후 이제 버그도 고쳤고 무한스크롤링도 되고 삭제시에도 더 많은 노트들을 보여줄수 있습니다!

profile
killi8n

0개의 댓글