react.js - to-do list 구현하기

To-do list 구현하기

to-do list에
1. "REACT.JS 수강하기"
2. "Velog에 기록하기"
라는 data를 입력하고, 수행 여부를 체크할 수 있는 체크박스 또한 만들어 주었다.

App.css

App.css
전체 Container와 todo Block에 대한 css이다.
white(#fff) Block에 그림자가 있게 만들어주었다.

container{
  margin: auto;
  max-width: 600px;
}

.todoBlock{
  padding: 30px;
  margin-top: 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: -9px 17px 13px rgb(0 0 0/16%);
}

App.js

App.js
container안의 todoBlock에 todoData가 들어가있는 형태이다.
data의 편리한 사용을 위해 map형식을 사용하고 key값을 이용해 선언해주었다.

todoData의 형식은 id, title, completed(완성여부)로 구성되어 있다.

todoData = [
    {
      id: "1",
      title: "REACT.JS 수강하기",
      completed: true
    }

div태그의 style은 기존에 작성해둔 btnStyle, getStyle을 사용해 주었다. map 형식을 사용하여 data의 id를 key값으로 설정해주었다.

{this.todoData.map(data=> (
        <div style={this.getStyle()} key={data.id}>
          <input type="checkbox" defaultChecked={false}/>
           {data.title}
          <button style={this.btnStyle}></button>
      </div>
      ))}

최종 App.js

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",
      TextDecoation: 'none'
    }
  }

  todoData = [
    {
      id: "1",
      title: "공부하기",
      completed: true
    },
    {
      id: "2",
      title: "청소하기",
      completed: false
    },
  ];
  
  render(){
    return(
      <div className="container">
        <div className="todoBlock">
          <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}></button>
      </div>
      ))}
        </div>
      </div>
    );
  }
}