사용자의 키보드 입력을 받아내는 방법을 알아보겠습니다. 키보드 입력을 받아낼 때는 TextInput이라는 컴포넌트를 사용합니다.

AddTodo 컴포넌트를 열어 기존에 설정한 빨간색 배경을 없애고, 다음과 같이 TextInput 컴포넌트를 사용해보세요.

components/AddTodo.js

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

function AddTodo() {
  return (
    <View style={styles.block}>
      <TextInput placeholder="할일을 입력하세요." style={styles.input} />
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    height: 64,
    paddingHorizontal: 16,
    borderColor: '#bdbdbd',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    justifyContent: 'center',
  },
  input: {
    fontSize: 16,
    paddingVertical: 8,
  },
});

export default AddTodo;