[React-Native] SectionList

SectionList는 말그대로 section이 나눠져있는 리스트뷰이다.

 

필요한 모듈

import {FlatList} from 'react-native';

 

데이터 배열 선언

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

 

리스트 컴포넌트 디자인

data 배열로부터 item을 가져와 리스트에 렌더링하기 위한 코드

const Item = ({title}) => (
  <TouchableOpacity style={[styles.item]}>
    <Text style={styles.description}>{title}</Text>
  </TouchableOpacity>
);

 

화면에 보이기

이제 아래와 같이 <SectionList>를 사용해서 위에서 선언한 것들을 합쳐보자.

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}	//데이터
      renderSectionHeader={({section: {title}}) => (	//section의 제목
        <Text style={styles.title}>{title}</Text>
      )}
      renderItem={({item}) => <Item title={item} />}	//리스트뷰
      keyExtractor={(item, index) => item + index}	//key
    />
  </SafeAreaView>
);

 

전체 코드

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

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

const Item = ({title}) => (
  <TouchableOpacity style={[styles.item]}>
    <Text style={styles.description}>{title}</Text>
  </TouchableOpacity>
);

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.title}>{title}</Text>
      )}
			renderItem={({item}) => <Item title={item} />}
      keyExtractor={(item, index) => item + index}
    />
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 10,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#CFFF8D',
    padding: 20,
    marginVertical: 8,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
  },
  description: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
});

export default App;

 

실행화면