4.2.4 항목 사이에 구분선 보여주기

TodoItem 컴포넌트와 다른 TodoItem 컴포넌트 사이에 구분선을 보여주는 방법을 알아보겠습니다. 웹에서는 CSS의 & + & 셀렉터를 통해 특정 엘리먼트들 사이에만 테두리를 보여주게 설정할 수 있는데요. 리액트 네이티브에서는 셀렉터 기능이 존재하지 않습니다. 그 대신 FlatList에 ItemSeparatorComponent Props를 지정해 컴포넌트 사이에 구분선을 설정할 수 있습니다. TodoList 컴포넌트를 다음과 같이 수정해보세요.

components/TodoList.js

import React from 'react';
import {FlatList, View, StyleSheet} from 'react-native';
import TodoItem from './TodoItem';

function TodoList({todos}) {
  return (
    <FlatList
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       style={styles.list}
       data={todos}
       renderItem={({item}) => (
          <TodoItem id={item.id} text={item.text} done={item.done} />
       )}
       keyExtractor={item => item.id.toString()}
     />
   );
}
const styles = StyleSheet.create({
  list: {
    flex: 1,
  },
  separator: {
    backgroundColor: '#e0e0e0',
    height: 1,
  },
});

export default TodoList;