state 생성

const [newtodo,setnewTodo]=useState("")
const [todos,setTodos]=useState([
  {text:'할일하기',id:0,complete:false},
  {text:'설거지',id:1,complete:false},
  {text:'밥하기',id:2,complete:true}
])

• id 값 없이 index로 하게되면 수정 삭제가 까다로워 집니다.
• id 값을 쉽게 만드는 방법은 바로 아래 추가하기 부분에서 적겠습니다.

input 추가하기

const onChange = (e)=>{
    setnewTodo(e.target.value)
  }
const onClick = ()=>{
  const newTodos = [...todos,
    {text:newtodo,id:Date.now(),complete:false}
  ]
  setTodos(newTodos)
  setnewTodo('')
}

• input 을 적을 때마다 onChange로 바꿔줘야합니다.
• 또한 제출되었을 때 , 새로운 todos를 만들어 예전 것을 copy하고 새로운 todo의 값들로 object 형태로 만들어 줍니다.
  
• id 만들기 : Date.now() 를 사용하게 되면 쉽게 독자적인 id 생성 가능하다.
• setTodos로 만들어 놓은 newTodos로 바꿔주게 되고 input 값을 비워준다.

삭제하기

const deleteTodo = (index)=>{
  const newTodos = todos.filter(todo=>(todo.id!==index))
  setTodos(newTodos)
}

• todos에서 filter를 이용해서 index 번호가 아닌것들을 다시 저장한다.
• 그리고 todos를 그 값들로 다시 만들어준다.

완료 되게 하기

const onComplete = (index)=>{
  setTodos(todos.map(todo=>
    todo.id === index ? {...todo,complete:!todo.complete}:todo))
}

todos를 map을 사용해 하나하나 index를 확인 후 그 값이 아니면 그대로 ,

그 값이라면 todo 내용 그대로 복사후 complete 만 바꿔준다.

보여주기

const todolist = todos.map(todo => 
<li className={todo.complete&&"complete"} 
	key={todo.id} 
	onClick={()=>onComplete(todo.id)} 
	onDoubleClick={()=>deleteTodo(todo.id)}
	>
	{todo.text}
</li>)
}

return (
    <div>
     <input 
			onChange={onChange} 
			onKeyPress={(e)=>{if(e.key==='Enter'){onClick()}}}
	    value={newtodo} type="text" placeholder='Write todo'/>
     <button onClick={onClick}>추가하기</button>
     <ul>{todolist}</ul> 
    </div>
  );

• className 주는법 todo의 complete가 true이면 class에 complete가 부여된다.
• 클릭시 완료가 되게 하고 , 더블 클릭시 삭제가 되게한다.
• input의 엔터키 누르는 법 →
  • onKeyPress={(e)=>{if(e.key==='Enter'){onClick()}}}
  • 누른 값이 ‘enter’이면 함수를 실행 시킨다.

CSS

ul > .complete {
  text-decoration: line-through;
  color: aquamarine;
}

• ul안의 li가 complete라는 class를 갖는다면 저 스타일 실행된다