[React] 무한스크롤 렌더링에 유용한 InfinityList 생성기

안녕하세요 오늘은 무한스크롤 데이터를 다루는 InfinityList 컴포넌트를 생성한 경험을 소개해보고자 합니다. 리액트 네이티브의 FlatList 를 아시나요? 리액트 네이티브의 FlatList는 데이터가 많을 때 사용되는 컴포넌트로, 화면에 보여지는 부분만 렌더링하는 기능을 제공합니다. 이 컴포넌트를 사용하면 대규모 데이터 목록을 효율적으로 처리할 수 있습니다. 이전 글에서는 리액트 네이티브의 FlatList와 무한스크롤 API를 React Query를 활용하여 InfinityFlatList 컴포넌트를 만드는 과정에 대해 다룬 바 있습니다. [React Native] React Native에서 useInfiniteQuery를 사용하여 무한 스크롤 구현하기: InfinityFlatList 안녕하세요. ..
Frontend/React 2023. 10. 7. 02:01
[Web] IntersectionObserver API

안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 위한 다양한 기술 중 하나가 바로 "Intersection Observer API"입니다. IntersectionObserver he Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. Intersection Obser..
Frontend/JavaScript 2023. 5. 30. 11:40
[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
1