리스트를 표현하는 ScrollView VS FlatList 어느것을 써야하는가.

 

출처 :

https://reactnative.dev/docs/scrollview , 

https://reactnative.dev/docs/flatlist

리스트를 표현하는 ScrollView VS FlatList 어느것을 써야하는가.

리스트로 구현한 화면

여러가지 항목을 리스트로 구현하고자 할때, ScrollView와 FlatList 를 고려하게 된다. 각각의 특징과 장단점을 알아보고 선택할 수 있으면 좋겠다. 위 스크린 샷은 ScrollView와 FlatList로 각각 구현해보았다. 

 

<ScrollView>

ScrollView 에는  자식으로 ScrollView, Swiper,Text 등 여러가지를 가질 수 있다. 그리고 동시에 모든 자식컴포넌트를 렌더링한다.  모든 자식컴포넌트를 매번 동시에 렌더링하므로 무한 리스트나 많은 양의 데이터를 표시할 경우 화면에 표시되지 않아도 렌더링하게 된다는 뜻이다. 그래서 퍼포먼스가 나빠질 수 있다.

 

ScrollView로 구현한 Upcomming Movie

대신 많은 수의 Props 를 지원하므로  refreshControl (스크롤하여 새로고침) 과 같은 다양한 지원을 받을 수 있는 장점이 있다.

 

<FlatList>

FlatList 는 lazy Rander 방식으로 화면에 나타나기 직전에 렌더링을 하는 특징이 있다. 무한 스크롤을 구현할 때 퍼포먼스가 좋다. 만약 Section을 갖는 리스트를 구현하고자  한다면, <Section List>라는 것이 매우 유용하며 IOS와 Android에서 자주 사용하는 패턴을 쉽게 렌더링 할 수 있게 해준다. 

FlatList로 구현한 Upcomming Movie

ScrollView와는 다르게 자식컴포넌트를 갖지 않는다. 오직 Prop만으로 리스트를 렌더링한다. 그리고 같은 방향의 ScrollView의 안에 있으면 안된다. (스크롤뷰의 자식으로서 사용하면 안된다. 특히 같은 방향의 리스트로..)

Header의 Main dishes가 Sides 와 만날 때까지 Main dishes가 위에 붙어있는 패턴

 

 

 

끝