7.To Do List App Component

7. App.js

 id = 4;
  state = {
    toDoList: [{
      id: 1,
      text: '프로그래밍'
    },
    {
      id: 2,
      text: '운동'
    },
    {
      id: 3,
      text: '식단'
    }],
  };

  handleCreate = (data) => {
    const { toDoList } = this.state;
    this.setState({
      toDoList: toDoList.concat({ id: this.id++, ...data })
    });
  }

  handleRemove = (id) => {
    const { toDoList } = this.state;
    this.setState({
      toDoList: toDoList.filter((data) => data.id !== id)
    })
  }

  render() {
    const { toDoList } = this.state;
    return (
      <div className="App">
        <div className="Date">
          <ToDoDate />
        </div>
        <div className="Add">
          <ToDoAdd onCreate={this.handleCreate} />
        </div>
        <div className="List">
          <ToDoList data={toDoList} onRemove={this.handleRemove} />
        </div>
      </div>
    );
  }
}

-id값과 state에 todolist를 설정해준다.

-handleCreate 함수로 data매개변수를 받아 state에 todolist id값을 추가해주고 data에 다시 담아 concat으로 새로운 배열을 반환해준다.

-handleRemove 함수로 id매개변수를 받아 todolist에 filter를 사용해 클릭한 id값이 현재 state에 id값과 다를경우 삭제해준다.

-return 에서 만들어 둔 함수를 각 필요한 Component에 속성으로 전달한다.