react_native ActivityIndicator/Button/FlatList
ActivityIndicator 란?
● 로딩바를 표시하는 컴포넌트이다.
공식문서 도우미: https://reactnative.dev/docs/activityindicator
ActivityIndicator · React Native
Displays a circular loading indicator.
reactnative.dev
props
animating ( Type : bool )
- true 일 때 indicator 활성화
- false 일 때 indicator 비활성화 ( IOS는 false 일 때 일시정지 상태로 렌더링 된다. Android는 비활성화 한다. )
size ( Type : enum('small', 'large') )
- enum 유형이다. 작은 or 큰따옴표에 문자열을 입력하면 된다.
color ( Type : "색상명" )
- 로딩바의 색깔을 표시합니다.
hidesWhenStoppend ( Type : bool)
IOS 만 포함된다.
- true 일때 animating를 숨긴다.
- false 일때 animating를 표시된다.
ex)
Button 란?
● 모든 플랫폼에서 렌더링되어야 하는 기본 버튼 구성 요소 이다.
● TouchableOpacity 또는 TouchableWithoutFeedback 을 사용하여 자신만의 버튼을 만들 수 있다.
공식문서 도우미 : https://reactnative.dev/docs/button
Button · React Native
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
reactnative.dev
props
onPress ( Type : function(PressEvent) )
- 사용자가 버튼을 탭할 때 호출되는 핸들러 입니다.
title ( Type : string )
- 버튼 내부에 표시 할 텍스트입니다. Android에서는 주어진 제목이 대문자 형식으로 변환됩니다.
accessibilityLabe ( Type : string )
- 시각 장애인 접근성 기능에 대해 표시 할 텍스트입니다.
color ( Type : "색상명" )
- IOS 는 텍스트 색상을 지원합니다.
- Android 는 배경 색상을 지원합니다.
disabled ( Type : boolean )
- true 경우이 구성 요소에 대한 모든 상호 작용을 비활성화합니다.
- 기본 false
touchSoundDisabled ( Type : boolean )
- true 터치시 시스템 사운드를 재생하지 않습니다.
- 기본 false 입니다.
ex)
FlatList 란?
● 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 RN 컴포넌트입니다.
● JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서
많이 쓰이는 컴포넌트 입니다.
공식문서 도우미 :
https://reactnative.dev/docs/flatlist
FlatList · React Native
A performant interface for rendering basic, flat lists, supporting the most handy features:
reactnative.dev
<FlatList> 와 ScrollView는 주로 함께 사용되는데 사용용도에 차이점이 있다고 합니다.
<ScrollView> 는 데이터가 화면에 벗어났을때 Scroll을 생성하여 사용자와의 상호작용(swipe, 스와이프)을 통해 벗어난 부분을 볼 수 있게 해주는데 목적이 있다.
출력해야 하는 데이터가 고정적이고 데이터양이 많지 않을 경우 적합한 컴포넌트입니다.
<FlatList>는 한번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분만 렌더링한다.
props
data
- 데이터를 받는 위치 이다.
renderItem
- data에서 항목을 가져와 렌더링 한다. (컴포넌트로 정의한다.)
extraData
- 목록을 다시 렌더링하게 지시하는 마커 속성입니다.
ketExtractor
- Key 와 같은 기능이다. 지정된 index에서 지정된 항목의 고유 키를 추출 하는데 사용한다.
ListEmptyComponent
- 데이터가 비어있을때 렌더링 되는 컴포넌트입니다.
ListHeaderComponent
- 데이터를 받아와 출력하는 곳 위에 표시한다.