인프런 커뮤니티 질문&답변
작성한 질문수
인피니트 스크롤 질문있습니다!
해결된 질문
작성
·
607
1
안녕하세요. 제로초님
리액트 노드버드에서는 인피니트 스크롤링을 ㅁ
function onScroll() {
if (window.pageYOffset + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
if (hasMorePosts && !loadPostsLoading) {
const lastId = mainPosts[mainPosts.length - 1]?.id;
dispatch({
type: LOAD_POSTS_REQUEST,
lastId,
});
}
}
}
이런식으로 스크롤이 어떤 위치에 왔을 때 lastId를 통해서 디스패치를 하여 데이터를 가져오는 식으로 인피니트 스크롤링을 구현했잖아요?
리액트네이티브에서는 Flatlist같은 경우
onEndReached={() => {
EndReached();
}}
onEndReachedThreshold={2}
이런식으로 트리거를 작용하여 인피니트 스크롤링을 구현할 수 있더라구요.
그런데 Flatlist의 onEndReachedThreshold 를 쓰면 성능이 안좋고 버그가 많더라구요...
빠르지도 않구요..
혹시 리액트네이티브에서 인피니트 스크롤링할 때 어떤거 사용하면 좋을까요??
답변 2
1
제로초(조현영)
지식공유자
https://github.com/facebook/react-native/issues/14015#issuecomment-310675650
이런 식으로 두번 하는 것을 피할 수 있습니다. 데이터가 늦게 들어오는 건 데이터 요청을 좀 더 빨리하는 식으로 우회해야할 것 같습니다.
lastId 사용합니다.
0
스크롤링 할 때 너무 늦게 데이터가 들어온다거나 트리거 될 때 dispatch를 하게 설정 했다면, 중복으로 트리거가 되어서 dispatch가 두번 실행 되더라구요...
제로초님은 onEndReachedThreshold 사용하실 때 lastId 사용하시는 편인지도 궁금합니다!