[React Native] React Native에서 useInfiniteQuery를 사용하여 무한 스크롤 구현하기: InfinityFlatList

안녕하세요. 오늘은 React Native의 FlatList를 통한 무한스크롤을 구현하는 방법을 소개하고자 합니다. React Native에서 제공하는 FlatList에서 무한 스크롤 기능을 갖춘 InfinityFlatList 컴포넌트를 만들었습니다. (네이밍은 제 마음대로..) 이 컴포넌트는 FlatList와 유사한 기능을 제공하면서 React Query useInfiniteQuery의 Properties과 병합해 사용자가 리스트의 끝까지 스크롤할 때 추가 데이터를 자동으로 로드하는 기능을 갖추고 있습니다. 이 글에서는 InfinityFlatList 컴포넌트의 구현 과정을 안내하고 React Native 프로젝트에서 어떻게 사용할 수 있는지 설명하겠습니다. 시작하기 먼저, InfinityFlatList..
Frontend/React-native 2023. 5. 24. 00:48
[React Native] 리액트 네이티브에서 데이터 무효화와 새로고침 기능을 제공하는 useRefreshing hook 소개

React Native의 FlatList, ScrollView 와 같은 컴포넌트에는 refreshControl 속성이 있습니다. 이 prop을 사용하면 사용자가 스크린을 아래로 내릴 때 (Swiping Down) 리스트를 새로고침할 수 있는 기능을 구현할 수 있습니다. 해당 기능은 refreshControl이라는 속성에서 제공되는데요. 자세한 기본 설명은 React Native 문서를 참고해주세요. 이번 글에서는 refreshControl를 구현하기 위해 생성한 useRefreshing이라는 커스텀 훅에 대해 알아보겠습니다. 이 훅은 리액트 쿼리(Query)를 무효화하고 새로고침하는 기능을 제공하여 애플리케이션의 데이터 관리를 향상시킵니다. useRefreshing 의 기능과 목적 useRefreshin..
Frontend/React-native 2023. 3. 28. 23:38
1