React 간단한 TODO List 만들어 보기

import React from 'react';
import { List, Input } from 'antd';

// class TodoItem extends React.Component {
//   render() {
//     const { todo } = this.props;
//     return <li>{todo}</li>;
//   }
// }

const TodoItem = ({ todo }) => <li>{todo}</li>;

class ToDoList extends React.Component {
  state = {
    todoList: ['파이썬 익히기', '장고 익히기'],
    current: '',
  };
  onChange = (e) => {
    const { value } = e.target;
    this.setState({
      current: value,
    });
  };
  onKeyDown = (e) => {
    if (e.keyCode === 13) {
      // ENTER KEY
      const { todoList, current } = this.state;
      if (current.trim().length > 0) {
        this.setState({
          current: '',
          todoList: [...todoList, current.trim()], // state는 불변으로 유지하는게 좋으니 복사 사용
        });
      }
    }
  };
  render() {
    return (
      <div style=>
        <List
          header={'Todo List'}
          dataSource={this.state.todoList}
          bordered={true}
          renderItem={(todo) => <List.Item>{todo}</List.Item>}
          style=
        />
        <Input
          type="text"
          value={this.state.current}
          placeholder={'할일을 입력해주세요.'}
          onChange={this.onChange}
          onKeyDown={this.onKeyDown}
        />

        {/* <ul>
          {this.state.todoList.map((todo, index) => (
            <TodoItem key={index} todo={todo} /> // 순회돌면 key 필요
          ))}
        </ul>
        <input
          type="text"
          placeholder="할일을 입력해주세요."
          value={this.state.current}
          onChange={this.onChange}
          onKeyDown={this.onKeyDown}
        />
        <hr /> */}
        {/* {JSON.stringify(this.state)} */}
      </div>
    );
  }
}

export default ToDoList;