[2주차] 함초롬 미션 제출합니다.

src/components/todo/Todo.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import TodoInput from './TodoInput';
 import TodoCard from './TodoCard';
 
-const Div = styled.div`
+const Wrapper = styled.div`
   width: 80%;
   background-color: rgb(222, 242, 167);
   margin: 0px auto;
@@ -21,7 +21,6 @@ class Todo extends Component {
   }
 
   onClick = (index) => {
-    console.log(this.state.todoList)
     let newTodoList = Array.from(this.state.todoList)
     newTodoList.splice(index, 1);
     this.setState({ todoList: newTodoList });
@@ -31,34 +30,25 @@ class Todo extends Component {
     if (this.state.todoList.length === 0) {
       return "표시할 TODO가 없어요!";
     }
-    else {
-      let showTodoList = [];
-      for (let index = 0; index < this.state.todoList.length; index++) {
-        showTodoList.push(
-          <TodoCard
-            index={index}
-            todo={this.state.todoList[index]}
-            onClick={this.onClick}
-          />);
-      }
-      return showTodoList;
-    }
+
+    let showTodoList = this.state.todoList.map((_todo, index) => {
+      return <TodoCard index={index} todo={_todo} onClick={this.onClick}/>;
+    });
+    return showTodoList;
   }
 
   onSubmit = (_todo) => {
-    let newTodoList = Array.from(this.state.todoList);
-    newTodoList.push(_todo);
     this.setState({
-      todoList: newTodoList
+      todoList: [...this.state.todoList,_todo]
     });
   }
 
   render() {
     return (
-      <Div>
+      <Wrapper>
         <TodoInput onSubmit={this.onSubmit}></TodoInput>
         {this.getTodo()}
-      </Div>
+      </Wrapper>
     );
   }
 }

src/components/todo/TodoCard.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-const Div = styled.div`
+const CardWrapper = styled.div`
   background-color: rgb(32, 122, 38);
   color: white;
   font-size: 1.5rem;
@@ -15,11 +15,11 @@ class TodoCard extends Component {
 
   render() {
     return (
-      <Div onClick={() => {
+      <CardWrapper onClick={() => {
         this.props.onClick(this.props.index);
       }}>
         {this.props.index + 1}. {this.props.todo}
-      </Div>
+      </CardWrapper>
     )
   }
 }

src/components/todo/TodoInput.js

@@ -11,13 +11,16 @@ const Button = styled.input`
   font-size: 1.5rem;
   border-radius: 0.5rem;
 `
+const Form = styled.form``
+const Input = styled.input``
+
 
 // 힌트 : Row, Input, Button
 class TodoInput extends Component {
 
   render() {
     return (
-      <form name="addListForm"
+      <Form name="addListForm"
         onSubmit={(e) => {
           e.preventDefault();
           if (e.target.todo.value === "")
@@ -30,7 +33,7 @@ class TodoInput extends Component {
         }
       >
         <Row>
-          <input
+          <Input
             type="text"
             name="todo"
             placeholder="TODO를 입력하세요" />
@@ -39,7 +42,7 @@ class TodoInput extends Component {
             name="addButton"
             value="ADD" />
         </Row>
-      </form>
+      </Form>
     );
   }
 }