TIL 21 : 투두리스트, 다시

시작하면서 (2.4/5.0)

지은님과 함께 일요일 모각코를 함께하는, 작심 스터디카페.
기분은 약간 저조.
좀 더 부지런한 새벽코딩으로 주말을 깨우고 싶다.

끝내면서 (2.7/5.0)

지은님과 백채 김치찌개를 먹으면서 유자막걸리 한잔.

스케쥴

3.30-4.30 : 클래스형으로 카운터를 만들면서 이해해보기
4.30-5.30 : todolist 다시만들기 (이슈 : 스프레드문법을 사용한 값 갱신)
5.30-6.30 : 댓글 기능 구현 (등록, 삭제, 색깔 체인지)
6.30-7.30 : 댓글 하튜하튜

12-1 : 댓글 하튜하튜
1-2 : hoc 구현

배운 것

1)

2)

3)

App.js

import React, { Component } from 'react';
import Todolist from './Todolist';

class App extends Component {
constructor(props) {
  super(props);
  this.state= {
    todos:[] ,list:'' 
  }
}

handleDelete =(id) =>{
    this.setState({

      todos: this.state.todos.filter( el =>
        el.id !== id)
    }) 
}
handleHeart =(id) => {
  this.setState({ //this.setState로 바로 바꿔주네
    todos : this.state.todos.map( el =>{ //바꿀 키를 써주고, 맵 돌리기
      if(el.id ===id){
        return { ...el, //객체를 리턴하니까, 중괄호 써주고
        heart : !el.heart} //el 전체를 복사하고, heart키 바꿔주는데 키값은 el.heart키값의 반대
        
      } return el //el만 바꾸는군앙...!
      
    })
    
  })
}

  render() {
    return (
      <div>
        <h2>할일 목록</h2>
        <Todolist todos={this.state.todos}
        onClickDelete={this.handleDelete}
        onClickHeart={this.handleHeart} />
        <form
        onSubmit={(e)=>{
          e.preventDefault()
          const newItem ={
            id:Date.now(),
            list : this.state.list,
            heart: false
          }
          this.setState({
            todos : [...this.state.todos,
              newItem],
              list:''     
              
            
          })
        }}>
          <input 
          value={this.state.list}
          onChange={(e)=>{
            this.setState(
              { list:e.target.value
              }
            )
            console.log(e.target.value)
          }
           
          }
          />
          <button >할일등록</button>
        </form>
      </div>
    );
  }
}

export default App;

Todolist.js

import React, { Component } from 'react';

class Todolist extends Component {
    render() {
        return (
            <div>
             <ul>
                 {this.props.todos.map((todo) =>{
                  return  ( 
                       <li key={todo.id}>{todo.list}
                       <button
                       onClick={() =>this.props.onClickHeart(todo.id)
                                             }
                        style={{color:todo.heart? "pink" : "black"}}
                        >==0==</button>
                       <button 
                       onClick={()=>this.props.onClickDelete(todo.id)}
                       >삭제</button>
                       </li>

                    
                    )
                 }
                     
                 )}
                
                 </ul>   
            </div>
        );
    }
}

export default Todolist;

두개의 인풋 관리하기 app.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state ={
      myName:'',
      nickName:''
    }
  
  }
  handle=() =>{
    this.setState({
      myName:'',
      nickName:''

    })
  }

  render() {
    return (
      <div>
       
          <input
           value={this.state.myName} 
          onChange={(e)=>{
            this.setState({
              myName: e.target.value})
          }}
          name="myName"
          />
          <input
          value={this.state.nickName}
          name="nickName"
          onChange={(e)=>{
            this.setState({
              nickName: e.target.value})
          }}
          />
          <button
          onClick={()=>this.handle()}
          > 초기화</button>

       
      <div> 이름: {this.state.myName}  닉네임 : {this.state.nickName}</div>
      </div>
    );
  }
}

export default App;