React Native Tutorial 따라하기 📱

📌 튜토리얼을 따라한 프로젝트입니다!

할 일 목록 추가하기 - TodoInsert

setTodos로 할 일 목록을 추가하는 addTodo 함수 만들기

app.js에 아래의 코드를 추가해주세요!

const addTodo = text => {
    setTodos([
      ...todos,
      {id: Math.random().toString(), textValue: text, checked: false},
    ]);
  };

설명

addTodo함수는 사용자가 입력한 텍스트를 인자로 받아 새로운 todo 객체를 생성합니다. id는 랜덤으로 생성되도록 하였고, 완료 여부를 나타내는 checked 속성은 false를 기본값으로 주었습니다. 사용자가 입력한 텍스트는 textValue 속성을 들어갑니다. 기존 할 일 목록은 현재 상태를 나타내는 todos를 이용해서 그대로 가져옵니다. 따라서 setTodos 함수를 통해 이전에 있던 목록은 그대로 유지하면서 새로운 목록을 추가한 배열을 생성합니다.

addTodo 함수를 TodoInsert 컴포넌트로 전달하기

app.js안의 부분을 수정해주세요!

<TodoInsert onAddTodo={addTodo} />

전달받은 함수 받기

TodoInsert.js 안에 아래의 코드를 추가해주세요!

const TodoInsert = ({onAddTodo}) => {
  ...
}

useState 훅을 이용하여 입력받은 값의 상태 관리하기

// components/TodoInsert.js
import React, {useState} from 'react';

const TodoInsert = ({onAddTodo}) => {
  const [newTodoItem, setNewTodoItem] = useState('');
...
}

설명

텍스트 값은 문자열(string)이므로 초기 상태값은 ''로 초기화 합니다. newTodoItem는 새로 입력한 텍스트의 상태를 나타내고, setNewTodoItem은 newTodoItem을 업데이트하는 함수입니다.

실시간 값 처리를 위한 랜들러 함수 생성하기

const todoInputHandler = newTodo => {
    setNewTodoItem(newTodo);
  };

...
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.input}
        placeholder="Add an item!"
        placeholderTextColor={'#999'}
        onChangeText={todoInputHandler}
        value={newTodoItem}
        autoCorrect={false}
      />
...

설명

TextInput 컴포넌트의 속성으로 onChangeText을 추가하였고 그 안에 todoInputHandler를 넣어줍니다. 또한 value 속성에는 newTodoItem을 넣어줍니다. 이제 입력창에 텍스트를 입력하면 실시간으로 입력한 텍스트 값의 상태가 업데이트 되며 newTodoItem에는 텍스트 값의 최신 상태가 담기게 됩니다.

아이템을 추가해주는 핸들러 생성하기

const addTodoHandler = () => {
    onAddTodo(newTodoItem);
    setNewTodoItem('');
  };

...

      <View style={styles.button}>
        <Button title={'ADD'} onPress={addTodoHandler} />
      </View>
...

설명

addTodoHandler 함수 안에는 onAddTodo와setNewTodoItem가 있습니다. onAddTodo 함수는 사용자가 입력한 텍스트 값을 전달 받아 목록에 추가하고, setNewTodoItem함수는 입력창을 공백으로 초기화 시키는 역할을 합니다.

Button 컴포넌트에서 기본적으로 제공하는 onPress 이벤트에 addTodoHandler() 핸들러를 넣어줍니다. 이제 사용자가 ADD 버튼을 누르면 아이템이 추가됩니다.