React Native에서 사용자 정의 페이지 매김을 사용하여 동적으로 데이터를 로드하는 방법

Jan 24, 2024

동적 데이터 로딩을 통한 사용자 정의 페이지 매김은 앱의 성능과 전반적인 사용자 경험을 향상시킬 수 있습니다.

페이지 매김은 성능과 유용성을 향상시키기 위해 대량의 데이터를 더 작고 관리하기 쉬운 청크 또는 페이지로 나누는 시스템을 의미합니다. 사용자 정의 페이지 매김을 올바르게 구현하면 더 나은 사용자 경험을 제공할 수 있습니다. 데이터를 동적으로 로드할 수 있는 React Native에서 사용자 정의 페이지 매김 솔루션을 만드는 방법을 알아보세요.

​​​​​​사용자 정의 페이지 매김을 통해 개발자는 애플리케이션의 특정 요구 사항에 맞는 페이지 매김 메커니즘을 만들 수 있습니다. 사용자 정의 페이지 매김에는 페이지 간 탐색을 위한 고유한 사용자 인터페이스 디자인, 데이터베이스 또는 API에서 데이터를 가져오기 위한 알고리즘 구현, 무한 스크롤 또는 지연 로딩과 같은 기능 통합이 포함될 수 있습니다.

React Native 모바일 앱을 위한 사용자 정의 페이지 매김 시스템을 만들면 다음과 같은 이점을 얻을 수 있습니다.

React Native 애플리케이션이 해당 시점에 로드해야 하는 필수 데이터만 로드하는 경우 이를 동적 로딩이라고 합니다. 사용자 정의 페이지 매김을 사용하여 동적 로딩을 구현하려면 다음과 같은 일반적인 단계를 따르세요.

React Native에서 사용자 정의 페이지 매김을 구현하는 첫 번째 단계는 데이터 소스를 설정하는 것입니다. 여기에는 일반적으로 API 또는 데이터베이스에서 데이터를 가져와 상태 변수에 저장하는 작업이 포함됩니다. 책 목록을 반환하는 간단한 REST API를 생각해 보세요.

API 응답의 예는 다음과 같습니다.

React Native 앱에서 이 데이터를 가져오려면 다음을 사용할 수 있습니다.술책함수는 다음을 반환합니다.약속하다REST API의 응답으로 해결됩니다.

API에서 데이터를 가져오고 새로 수신된 데이터로 상태를 업데이트하는 함수를 만들어 보겠습니다. 이 함수는 React Native 앱의 화면에 무엇을 렌더링할지 결정합니다.

이 함수를 페이지 매개변수를 취하고 가져온 데이터로 해결하는 Promise를 반환하는 비동기 함수로 정의하겠습니다.

위의 코드 블록에서책 가져오기함수는페이지 매개변수를 지정하고 해당 페이지의 데이터로 해결되는 Promise를 반환합니다. 여기서는페이지 크기페이지당 가져오는 책의 수를 제한하는 데 상수가 사용됩니다.

사용자 정의 페이지 매김 기능을 정의하면 이제 이를 사용하여 앱에서 동적 로딩을 구현할 수 있습니다. 이렇게 하려면플랫리스트React Native에서 대규모 데이터 목록을 렌더링하기 위한 고성능 컴포넌트입니다.

먼저,플랫리스트초기 상태가 있는 구성요소:

이 코드는 두 가지 상태로 FlatList 구성 요소를 설정합니다.서적그리고현재 페이지 . 우리는사용효과()앱이 처음 실행될 때 데이터의 초기 페이지를 가져오는 후크입니다.

다음으로, 우리는렌더아이템항목을 가져오는 함수서적배열을 반환하고보다책 제목과 저자가 포함되어 있습니다.

마침내, 우리는 통과했습니다서적에 배열데이터소품플랫리스트, 우리와 함께렌더아이템기능과키추출기.

이제 사용자가 목록 끝으로 스크롤할 때 Flatlist가 이를 감지할 수 있는지 확인해야 합니다. 그 시점에서 새 데이터를 가져와서 로드하고 렌더링해야 합니다.

이를 위해 우리는onEnd도달됨에 제공되는 소품플랫리스트 , 이는 사용자가 목록 끝으로 스크롤할 때 호출되는 콜백입니다. 우리는 또한 우리의현재 페이지상태를 사용하여 현재 어떤 페이지에 있는지 추적할 수 있습니다.

이 모든 것을 구현하는 업데이트된 코드는 다음과 같습니다.

여기에는 두 가지 새로운 상태를 추가했습니다.로드 중그리고onEndReachedThreshold.로드 중현재 데이터를 가져오고 있는지 여부를 추적합니다.