React Native에서 제공되는 컴포넌트 중에는 스크롤 콘텐츠를 표시하기 위한 두 가지 기본 컴포넌트가 있습니다. ScrollView와 FlatList입니다. 이 글에서는 두 컴포넌트에 대한 간략한 소개와 비교 내용을 정리해봅니다.
ScrollView
ScrollView는 화면 크기를 초과하는 콘텐츠를 스크롤할 수 있는 간단하면서도 강력한 컴포넌트입니다. 긴 항목 목록이나 화면의 크기에 맞지 않는 다양한 유형의 콘텐츠를 표시하는 것이 필요할 때 사용할 수 있습니다.
장점:
- 임의의 보기 및 구성 요소 지원
- 사용 및 사용자 지정이 간편함
- 중소규모 목록에 적합
단점:
- 모든 항목을 한 번에 렌더링하므로 큰 목록의 경우 속도가 느릴 수 있음
- 대량의 데이터를 렌더링할 때 성능 문제가 발생할 수 있음
- 지연 로딩 및 항목 재사용과 같은 최적화를 위한 기본 지원이 제한됨
https://reactnative.dev/docs/scrollview
ScrollView · React Native
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
reactnative.dev
FlatList
플랫리스트는 목록의 내용이 더 길수록 더 나은 성능과 최적화를 제공하는 고급 스크롤 컴포넌트입니다. 현재 화면에 표시되는 항목만 렌더링하여 긴 데이터 목록을 효율적으로 렌더링하는 것이 필요할 때 사용할 수 있습니다.
장점:
- 보이는 항목만 효율적으로 렌더링하여 성능 향상
- 항목 재사용 및 지연 로딩 기본 지원
- 가시성 및 스크롤 자동 관리
단점:
- 스크롤뷰보다 사용 및 사용자 지정이 더 복잡할 수 있음
- 임의의 뷰 및 컴포넌트에 대한 제한적인 지원
https://reactnative.dev/docs/flatlist
FlatList · React Native
A performant interface for rendering basic, flat lists, supporting the most handy features:
reactnative.dev
어떤 것을 사용하면 좋을지 고민해보고 적절한 선택을 하는 것이 중요합니다. 목록의 내용이 그리 길지 않고, 일정량으로 정해져 있다면 ScrollView가 적합하며, 큰 목록과 최적화된 성능을 원한다면 FlatList가 더 좋습니다. 긴 데이터 목록을 표시해야 하고 성능을 최적화하려면 FlatList를 사용하세요. 뷰의 구성 요소나 유형에 더 많은 유연성이 필요한 경우 스크롤뷰가 더 나은 옵션일 수 있습니다.
지연 로딩이란?
지연 로딩은 소프트웨어 개발에서 중요하지 않은 리소스의 로딩을 필요할 때까지 연기하는 데 사용되는 기술입니다. 이는 애플리케이션의 성능을 저하시킬 수 있는 대량의 데이터나 리소스를 처리할 때 특히 유용할 수 있습니다.
전반적으로 지연 로딩은 특정 시간에 로드해야 하는 리소스의 양을 줄이고 앱의 반응성과 속도를 높여 사용자 경험을 향상시킴으로써 React Native 앱의 성능을 최적화하는 데 도움이 될 수 있습니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0
