리액트-할일목록UI만들기

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:'rigtht'
  }
  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'>
        <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}>x</button>
            </div>
          ))}
        </div>
      </div>

    )
  }
}

map method 사용
map 에서 parameter -
ex) this.todoData.map(data..)
입력변수명 쓰기

---

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

삭제-filter

filter method 사용
onclick
조건, 맞으면 return 함

React rerendering

리액트에서 데이터가 변할때 화면을 다시 렌더링해주기 위해서는 react state를 사용 해야한다.

React state 란?

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다. state가 변경되면 컴포넌트는 리렌더링된다.
또한 state는 컴포넌트 안에서 관리된다.