FlatList

FlatList는 여러개의 element 혹은 component를 화면에 그려주는 역할을 한다.
화면에 구현되는 것을 보면 ScrollView와 비슷하지만, 사용하는 경우나 랜더링의 특성 등이 다른 특징이 있다.

FlatList vs. ScrollView

FlatList

주로 변화가 있는 데이터를 가지고 뷰를 만들 때 FlatList를 사용한다.
필수 props인 data, renderItem으로 데이터를 자동으로 가공해주고 다양한 Props를 이용해 상단, 하단에 위치할 컴포넌트를 지정해줄수도 있다.
데이터에 변경이 있을 경우 스크린에 보여지는 부분만 랜더된다.

ScrollView

주로 변화가 없는 데이터(정적인 데이터)로 뷰를 구성할 때 사용한다.
데이터 기반으로 여러 컴포넌트를 그려내야 할 경우에는 map 메소드 등을 이용해 구현한다.
데이터에 변경이 있을 경우, 스크린에 보여지지 않는 곳 까지 랜더된다.

How to use

  <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => String(item.id)}
      />

data

필수로 작성해줘야하는 props이다.
데이터 기반으로 컴포넌트를 반복해서 보여주기 때문에, 기반이 될 데이터 배열을 넣어주면 된다.

renderItem

필수로 작성해줘야 하는 props이다.
map 메소드처럼 데이터 하나를 어떻게 가공해줄것인지에 대해 작성해줘야한다.
비구조화 할당을 통해 ({item})=>{return ~~~} 식으로 콜백함수를 작성해주고, 그 내부에 컴포넌트를 넣을 수 있다.

데이터 하나하나가 parameter.item과 같은 식으로 넘겨지는 것 같다. item이 아니라 다른 이름이 들어가게되면.. 망하더라..

KeyExtractor

map 메소드처럼 하나하나를 구별해줄 수 있는 키값을 지정해주는데 쓰인다.
필수는 아니지만, 경고창이 뜬다. 콜백함수 인자로 데이터 하나를 받아온다.

bounces

value로 boolean type을 받으며, true가 기본 설정 값이다.
스크롤을 할 경우 더 당겨지거나 하는 등에 의한 바운스 모션을 설정해주는 값으로,
false로 설정할 경우 바운스 모션이 사라지게 된다.

horizontal

default value는 false, 즉 수직으로 스크롤이 가능하게 되어있다.
true로 설정할 경우 수평 스크롤이 가능해지고, horizontal={true} 대신에 horizontal로 줄여 작성해줄 수 있다.

ListHeaderComponent, ListFooterComponent

FlatList의 최상단, 최하단에 들어갈 컴포넌트를 결정해준다.
식으로 작성하게 되면, 위의 Text 컴포넌트가 스크린 상에서 사라지지 않게 된다. 따라서 ListHeaderComponent, ListFooterComponent props를 이용해 최상단 혹은 최하단에 위치할 컴포넌트를 결정지어주는게 좋다.

ListEmptyComponent

FlatList에 데이터가 들어오기 전, 혹은 lazy loading을 위해 컴포넌트가 로딩되기 전 비어있는 것 처럼 보일 수 있다. 그런 경우 ListEmptyComponent props를 이용해 지정한 컴포넌트를 보여주도록 할 수 있다.

사용시 주의할 점

ScrollView도 마찬가지이지만, FlatList 혹은 ScrollView 컴포넌트 내부에 같은 방향으로 스크롤이 가능한 컴포넌트는 사용해서는 안 된다.
수직 스크롤 내부에 수평 스크롤 컴포넌트는 올 수 있다.