0001 React Native App 개발기 5

Flex를 활용한 화면 구성에 어느정도 익숙해졌다면 데이터를 이용해서 목록을 조회하여 이를 화면에 뿌려보자.

 

 

---

React Native의 List 컨트롤에 대해서 알아보겠다. 

 

• FlatList

  React Native 에서 제공하는 Flat List를 이용에 데이터를 바인딩 했을 때 아래와 같이 표현된다.

Flat List

<FlatList
          data={[
            {key: 'Devin'},
            {key: 'Dan'},
            {key: 'Dominic'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.tab_1_item}>{item.key}</Text>}
          />

 

• SectionList

React Native에서 제공하는 Section List를 이용해 데이터를 바이딩 했을 때 아래와 같이 표현할 수 있다. 

Section List

 

<SectionList
   sections={[
   {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
   {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
   ]}
   renderItem={({item}) => <Text style={styles.tab_2_item}>{item}</Text>}
   renderSectionHeader={({section}) => <Text style={styles.tab_2_sectionHeader}>{section.title}</Text>}
   keyExtractor={(item, index) => index}
 />

 

• List 의 아이템을 사용자의 요구사항에 따라 변경하고 싶을 때, 

FlatList나 SectionList 속성의 renderItem을 이용해서 리스트의 아이템에 아이콘을 추가하거나 버튼 외에 화면 이동 등 우리가 원하는 다양한 작업을 진행할 수 있다. 

 <View style={[styles.tab_1_container]} >
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Dan'},
            {key: 'Dominic'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => renderItem(item)}
          />
  </View>
    
 const renderItem = (item) => {
    return (
        <TouchableOpacity style={{flex:1, flexDirection : "row"}} activeOpacity={0.8}  >  
            <View style={{flex:8, padding : 10}} >
                <Text>{item.key} </Text>
            </View>
            <TouchableOpacity style={{flex :2}} >
                 <View style={{flex:2, padding : 10}}>
                    <Image
                        source={require('./icon.png')}
                        style={styles.tab_3_icon} 
                    />  
                </View>
            </TouchableOpacity>
            
        </TouchableOpacity> 
    )
  }

 

 

---

그렇다면 Flat List를 Realm의 데이터를 이용해서 조회하고자 할 경우,  아래와 같이 사용할 수 있다. 

Realm의 데이터로 조회했을 때,

 

<View>
   <TouchableOpacity style={{flex:1, flexDirection : "row"}} activeOpacity={0.8}  >  
      <View style={{flex:8, padding : 10}} >
          <Text>{item.userId} </Text>
      </View>
      <TouchableOpacity style={{flex :2}} >
          <View style={{flex:2, padding : 10}}>
            <Image
            source={require('./icon.png')}
            style={styles.tab_3_icon} 
            />  
          </View>
      </TouchableOpacity>
  </TouchableOpacity> 
</View>


const LineSchema = {
  name : 'LineUser',
    properties : {
      userId : 'string',
      userPwd : 'string',
      position : 'string?'
  }
}

const realm = new Realm({schema : [ LineSchema ]});

let data = realm.objects("LineUser").map((data, index) => (
  data
));

return (
  <View style={[styles.tab_1_container]} >
    <FlatList
      data={data}
      renderItem={({item}) => renderItem(item)}
    />
  </View>
)

 

기본적인 List를 설정하고, Realm을 이용해서 바인딩하는 방식에 대해서 알아보았다.