React-native/Lists, Scroll View

useState에는 string, array, object... 전부 그 STATE가 될 수 있습니다.

배열은 리스트죠. 화면에 요소들을 리스트로 나열해보는 것을 배워봅시다.

 

배열과 요소들

 

여기서 아셔야 할 것은 2가지 정도라고 생각이 됩니다.

1. map함수

2. 각 View요소에 키를 필수적으로 넣어줘야 한다는 것.

 

 

map함수는 그 용도가 정말 다양합니다.

people.map(item => {

          return (

            <View key={item.key}>

              <Text>{item.name}</Text>

            </View>

          );

        })

 

 

여기서 item은 배열의 각 요소를 나타냅니다.

알아서 끝까지 순회하니 for문이나 while문처럼 어떤 증가값이나, 종료시점을 알려주는 구문을 넣어주지 않아도 됩니다.

너무 간단했습니다.

map함수와 같이 그 인자로 함수(콜백)을 받는 함수들에 유의하셔야 합니다.
보통 대부분 그런 콜백의 인자는 자동적으로 부모함수로 부터 인자 값을 받아옵니다.
여기서 item인자는 자동적으로 배열의 각요소를 나타내게 약속되어있습니다.
(꼭 item이라고 명시해야하는 것이 아닙니다. 인자의 이름은 자유롭게 명시하면 됩니다.)

 

리스트 패딩, 마진, 배경색

 

하지만 문제가 있습니다.

스크롤이 되지 않습니다.

 

해결방법은 간단합니다.

ScrollView컴포넌트로 감싸주시면 됩니다.

 

간단한 스크롤 페이지

 

요번에는 map함수를 통해서 구현했는데

 

다음번에는 리엑트-네이티브에서 제공하는 FlatList컴포넌트를 활용해봅시다.