ScrollViews

• scrolling container
• 여러 컴포넌트와 뷰를 담고 있는 컨테이너
• 세로, 가로로 스크롤 가능 (horizontal 속성 사용할 수 있다)

신기한 점
: 객체에 style을 따로 안 넣고 바로 logo라는 변수 안에 uri, width, height를 넣으면 알아서 스타일이 들어간다

ScrollViews

• pagingEnabled라는 속성을 이용해서 swiping gesture를 이용해서 view를 내려볼 수 있다
• 안드로이드 : ViewPager 컴포넌트를 이용해서 가로로 swiping 가능
• IOS: 아래 속성들을 이요앻서 zoom 가능
  - maximumZoomScale
  • minimuZoomScale

스크린에 맞지 않을 정도로 많은 아이템들이 있으면 FlatList를 사용한다

List View

• 리스트를 표현하기에 좋은 컴포넌트들

FlatList

: 비슷한 구조를 가지고 있지만 계속 변하는 긴 리스트 스크롤 하고 싶을 때 사용하기 좋다
: ScrollView와 달리 현재 화면에 보여지는 요소들만 렌더링한다
그러므로 화면에 보이지 않는 요소들이 많은 경우에는 FlatList 사용하기

필수 props

• data : 리스트를 위한 필수 info
  
• renderItem : data에서 하나를 가져와서 렌더할 컴포넌트를 반환한다 (?)
• 림

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.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}) => <Text style={styles.item}>{item.key}</Text>}
        //1. data 속성에 넘겨주는 값의 요소 하나하나는 Text Component로 렌더링된다
        item : data에 들어오는 요소 하나하나 (화살표 함수와 다르게 {}이 필요??)
        2. FlatListBasics : FlatList와 모든 Text 컴포넌트들을 렌더링한다 
         
      />
    </View>
  );
}

export default FlatListBasics;

SectionList

• 데이터를 섹션별로 나누고 싶을 때 사용하는 컴포넌트
• 서버에서 받은 데이터를 표현할 때 사용하기에 좋다

import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => `basicListEntry-${item.title}`}
        />
      </View>
    );
}

export default SectionListBasics;