4.2.3 TodoItem 컴포넌트 만들기

지금은 TodoList의 각 항목이 여백도 없고 폰트 크기도 너무 작죠? TodoItem이라는 컴포넌트를 만들어 스타일링도 하고, 나중에 기능을 붙일 수 있도록 해보겠습니다. components 디렉터리에 TodoItem.js 파일을 생성하세요. 그리고 다음 코드를 작성해보세요.

components/TodoItem.js

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

function TodoItem({id, text, done}) {
  return (
    <View style={styles.item}>
      <View style={styles.circle} />
      <Text style={styles.text}>{text}</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    padding: 16,
    alignItems: 'center',
  },
  circle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderColor: '#26a69a',
    borderWidth: 1,
    marginRight: 16,
  },
  text: {
    flex: 1,
    fontSize: 16,
    color: '#212121',
  },
});

export default TodoItem;