List View

위아래로 길게 표시되는 목록을 List View로 관리할 수 있는 것 같다

React Native의 List View는

• 변경될 수 있는 긴 리스트 목록에 적합
• 화면에 표시되고 있는 요소만 렌더링 한다

List View는 기본적으로 2개의 속성이 필요하다
1. List 목록으로 사용될 데이터 배열
2. renderItem = 리스트 중 하나의 요소를 인자로 받아 원하는 형식으로 반환하는 콜백 함수

React Native의 List View에는 2가지가 있다
FlatList, SectionList

FlatList

위아래로 떨어지는 Flat한 List
데이터 배열을 data라는 속성으로 받아
리스트 출력

import { FlatList } from 'react-native'

const arr = [
  {key: 'Devin'},
  {key: 'Dan'},
  {key: 'Dominic'},
  {key: 'Jackson'},
  {key: 'James'},
  {key: 'Joel'},
  {key: 'John'},
  {key: 'Jillian'},
  {key: 'Jimmy'},
  {key: 'Julie'},
]

const Flat = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={arr}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}

SectionList

섹션별로 분리된 FlatList를 제공한다
각 섹션별 타이틀을 지정할 수 있음

import { SectionList } from 'react-native'

const arr ={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}

const Section = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={arr}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => `basicListEntry-${item.title}`}
        />
      </View>
    );
}

flexDirection

React Native에서 display: flex를 적용하고자 찾아보니
flexDirection 속성을 사용하는 것 같다

flexDirection: 'row' // 수평
flexDirection: 'row-reverse'
flexDirection: 'column' // 수직

justyfy-contet와 align-items 옵션은 그대로 있는 것 같고,
alignSelf 옵션으로 개별 자식 컨테이너에 별도로 지정할 수 있다

flexWrap

flex box에 대한 overflow 속성을 지정하는 것
nowrap: 영역을 벗어나도 유지
wrap: 지정된 크기 내에서 자동 정렬

flex

React Native의 flex 속성은
각 영역의 비율을 지정하는 것

default 값은 없는 것 같다
1:1:2 비율을 원한다면 아래의 코드처럼 각각의 flex 속성에 1, 1, 2를 지정해줘야 한다

import { View } from 'react-native';

const Flex = () => {
  return (
    <View style={{flex: 1, flexDirection: 'row'}}>
      <View style={{flex:1, backgroundColor: 'red'}} />
      <View style={{flex:1, backgroundColor: 'green'}} />
      <View style={{flex:3, backgroundColor: 'blue'}} />
    </View>
  );
};