inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

배달앱 클론코딩 [with React Native]

인피니트 스크롤 질문있습니다!

해결된 질문

677

김건희

작성한 질문수 63

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 를 쓰면 성능이 안좋고 버그가 많더라구요...

빠르지도 않구요.. 

 

혹시 리액트네이티브에서 인피니트 스크롤링할 때 어떤거 사용하면 좋을까요??

react-native

답변 2

1

제로초(조현영)

https://github.com/facebook/react-native/issues/14015#issuecomment-310675650

이런 식으로 두번 하는 것을 피할 수 있습니다. 데이터가 늦게 들어오는 건 데이터 요청을 좀 더 빨리하는 식으로 우회해야할 것 같습니다.

lastId 사용합니다.

0

제로초(조현영)

저도 주로 그것 쓰는데 어떤 버그를 겪으셨나요?

0

김건희

스크롤링 할 때 너무 늦게 데이터가 들어온다거나 트리거 될 때 dispatch를 하게 설정 했다면, 중복으로 트리거가 되어서 dispatch가 두번 실행 되더라구요... 

 

제로초님은   onEndReachedThreshold   사용하실 때 lastId 사용하시는 편인지도 궁금합니다!

앱실행시 네이버맵 [401] 에러

0

995

2

스타일링 라이브러리

0

148

2

expo, cli 선택 중에 고민이 있습니다.

0

168

2

JDK 버전이 달라도 괜찮나요?

0

225

2

dimenstion usewindowdeminstion

0

122

3

[맥 전용]환경 설정하기 1편 & [맥 전용]환경 설정하기 2편의 영상이 안나옵니다.

0

212

1

jdk11 버전과 gradle 버전의 호환성 관련 질문드립니다.

0

401

2

강의 외 질문입니다!

0

157

2

react native랑 맞는 ui 라이브러리 어떤게 좋을까요?

0

1506

2

react native와 spring boot 연결

0

356

1

java가 아닌 .kt에서 code push 에러가 발생합니다.

0

215

2

flipper 239 에러가 발생합니다.

0

166

2

package.json에 /lib/panino.js 문제입니다.

0

471

2

window - mac 협업 과정 질문합니다

0

216

1

ios 빌드 중 RCTBridgeDelegate.h import 오류

0

289

2

ios 앱 빌드 중 hermesEnabled 관련 오류발생

0

240

2

Socket 연결시 질문 드립니다.!

0

152

2

wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.

0

427

2

iOS render error 질문드립니다.

0

410

2

iOS 가상머신 오류

0

166

2

npc react init 명령어 실행시 발생되는 오류

0

221

1

nom start 시 오류

0

116

1

NextJS 기반으로 만들어서 웹뷰 React Native로 배포 가능한가요?

0

1002

2

안드로이드 rn75 버전에 맞게 설정 중에 android13 다운로드에 대해서 막혔습니다!

0

185

2