개요

다음과 같이 버스 운행 정보가 담긴 앱을 구현하려 한다.

해당 서비스는 3 가지 Section 으로 구분되어 있는데,

  • 간선버스
  • 지선버스
  • 직행버스

해당 UI 를 Flat-List 를 사용하여 구현 하려한다면,

각각의 (버스 번호가 담긴) 아이템이 시작되는 첫번째를 알아내어,
그 위에 Section 을 추가해야하는 번거로움을 맞닥드리게 된다.

이와 같은 상황에 Section-List 컴포넌트를 사용하면,
조금 더 간단하게 구현할 수 있다.

Flat-List

UI 를 Flat-List 로 구현하려면,
FlatList 안에 data 라는 props 를 받고 그 안에 배열을 넣어주어 구현할 수 있다.
하지만,
작성된 코드를 보면 알 수 있듯 각각의 Section 을 구분 짓기엔 다소 어려움이 보인다.

<View style=>
    <Text style=>FlatList</Text>
    <FlatList
        data={[
            { busNum: 146 },
            { busNum: 360 },
            { busNum: 740 },
            { busNum: 3412 },
            { busNum: 1100 },
            { busNum: 1700 },
        ]}
        renderItem={({ item }) => <Text>{item.busNum}</Text>}
    />
</View>

Section-List

이번엔,
앞서 구현한 FlatList 를 SectionList 를 사용하여 코드를 리펙토링 한 형태이다.

먼저,
각각의 Section 을 담당하는 title 이 존재하고,
data는 각 Section 안에서 반복되는 데이터의 리스트의 형태이다.
data는 FlatList 와 같은 역할을 갖고 있다.

<View style=>
    <Text style=>SectionList</Text>
    <SectionList
        sections={[
            {
                title: "간선버스",
                data: [{ busNum: 146 }, { busNum: 360 }, { busNum: 740 }],
            },
            {
                title: "지선버스",
                data: [{ busNum: 3412 }],
            },
            {
                title: "직행버스",
                data: [{ busNum: 1100 }, { busNum: 1700 }, { busNum: 740 }],
            },
        ]}
        renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
        renderItem={({ item }) => <Text>{item.busNum}</Text>}
    />
</View>

회고

Flat-List와 Section-List 모두 각자가 갖고 있는 장점이 있으며,
다음과 같은 UI 를 구현할 때는,
Section-List 컴포넌트로 구현하는게 Flat-List 로 구현하는 형태 보다 조금 더 나아보인다.

두 컴포넌트 모두
담고있는 props 의 형태를 제외하고는 사용법이 동일하기 때문에
상황에 맞는 컴포넌트를 사용할 수 있을것 같다.

단,
Section 에 사용되는 title 을 render 하기 위해서는
renderSectionHeader props 을 사용하여 렌더링 하여야 한다.

renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
renderItem={({ item }) => <Text>{item.busNum}</Text>}

Reference

https://reactnative.dev/docs/flatlist
https://reactnative.dev/docs/sectionlist
https://velog.io/@djaxornwkd12/React-Native-FlatList%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
https://greatpapa.tistory.com/149