2021-07-17 :: React Native Official; The Basics

https://reactjs.org/docs/forms.html#controlled-components

Forms – React

The Basics

view 컴포넌트 안에 Text 컴포넌트를 삽입해서 사용한다.

Using a ScrollView

스크롤링이 가능한 컨테이너이다. 스와이핑 제스쳐를 통해서 컨트롤이 가능하다. 데이터의 양이 스크린의 크기를 넘는다면 FlatList를 사용하자. FlatList는 데이터를 동적으로 로딩하여 최적화된 사용자 경험을 제공한다. FlatList의 사용 예시는 아래와 같다.

<FlatList
	style={[styles.flatList]}
    data={data}
    renderItem={({item})=> <Person person={item} />}
    keyExtractor={(item, index)=> item.id}
    ItemSeparatorComponent={()=> <View style={styles.itemSeparator}/>}
/>

Using List Views

리액트 네이티브에서 리스트를 표현하기 위해 사용하는 두 가지 컴포넌트가 존재한다. 바로 FlatList와 SectionList이다.

FlatList는 ScrollView와 다르게 현재 화면에 보여지는 요소들만 렌더링한다. FlatList는 두가지 props를 받는다. data와 renderItem

data는 리스트의 데이터를 의미하고 renderItem은 각각의 데이터를 취하여 가공된 형태로 반환하여 렌더링 한다.

NetWorking

리액트 네이티브는 Fetch API를 제공한다. Fetch는 XMLHttpRequest와 비슷한 형태를 갖는다.