#17 react-todo-app : todo list

react/todo-app/src/App.js

@@ -2,6 +2,36 @@ import React, { Component } from "react";
 import "./App.css";
 
 export default class App extends Component {
+  btnStyle = {
+    color: "#fff",
+    border: "none",
+    padding: "5px 9px",
+    borderRadius: "50%",
+    cursor: "pointer",
+    float: "right",
+  };
+
+  getStyle = () => {
+    return {
+      padding: "10px",
+      borderBottom: "1px #ccc dotted",
+      textDecoration: "none",
+    };
+  };
+
+  todoData = [
+    {
+      id: "1",
+      title: "공부하기",
+      completed: true,
+    },
+    {
+      id: "2",
+      title: "청소하기",
+      completed: false,
+    },
+  ];
+
   render() {
     return (
       <div className="container">
@@ -9,6 +39,14 @@ export default class App extends Component {
           <div className="title">
             <h1>할 일 목록</h1>
           </div>
+
+          {this.todoData.map((data) => (
+            <div style={this.getStyle()} key={data.id}>
+              <input type={"checkbox"} defaultChecked={false} />
+              {data.title}
+              <button style={this.btnStyle}>x</button>
+            </div>
+          ))}
         </div>
       </div>
     );