17.2.2 할 일 목록 컴포넌트 만들기

    이번에는 해야 할 일을 추가하고, 체크하고, 삭제할 수 있는 할 일 목록 컴포넌트를 만들어 보겠습니다. components 디렉터리에 Todos 컴포넌트를 다음과 같이 작성하세요.

    components/Todos.js

    import React from 'react';
    
    const TodoItem = ({ todo, onToggle, onRemove }) => {
      return (
        <div>
          <input type="checkbox" />
          <span>예제 텍스트</span>
          <button>삭제</button>
        </div>
      );
    };
    
    const Todos = ({
      input, // 인풋에 입력되는 텍스트
      todos, //   목록이 들어 있는 객체
      onChangeInput,
      onInsert,
      onToggle,
      onRemove,
    }) => {
      const onSubmit = e => {
        e.preventDefault();
      };
      return (
        <div>
          <form onSubmit={onSubmit}>
            <input />
            <button type="submit">등록</button>
          </form>
          <div>
            <TodoItem />
            <TodoItem />
            <TodoItem />
            <TodoItem />
            <TodoItem />
          </div>
        </div>
      );
    };
    
    export default Todos;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.