react todolist 완성

딱히 많은 것이 바뀌진 않았다.

• checkbox를 해결했다!!
• 삭제 버튼을 react icon을 사용하여 변경해보았다.

dataItem.js

import { useState } from "react"
import {TiDeleteOutline } from 'react-icons/ti';

import './dataitem.css';
const DataItem = ({onDelete,id,text})=>{
  const [checkedBox, setCheckedBox] = useState(false)
  const [toggle, setToggle] = useState('')

  const checkHandle = (target) =>{
    if(checkedBox === false){
       setCheckedBox(true)
    } else {
      setCheckedBox(false)
    
    }
    
  }

  return  (
  <div className="data_item">
    <input key={id} className={toggle} type="checkbox" checked={checkedBox} id={id}onChange={(e)=>{checkHandle(e.target.id)}}/>
     <div className={`item_text ${checkedBox  === true ? "checked" : ""}`}>{text}</div> 
     <TiDeleteOutline onClick={()=>{
      console.log(id)
      onDelete(id)} } />
  </div>

  )
}

export default DataItem

• React icon : https://react-icons.github.io/react-icons
• 위 사이트에 보면 많은 아이콘들이 있다. 사용방법도 간단해서 사용해 보았다.

import {TiDeleteOutline } from 'react-icons/ti'; //이렇게 불러와서...
<TiDeleteOutline onClick={()=>{onDelete(id)} } />
//이렇게 사용하면 된다! 간단하게 태그처럼 사용할 수 있다.

• 여기서 TiDeleteOutline은 내가 사용한 icon이다. 사용할 아이콘 이름으로 변경해서 사용하면 된다!

• onDelete는 app.js에 만들어놓은 함수로 값을 받아와서 사용했다

  • onDelete: 입력받은 데이터를 저장한 배열에서 check한 item을 삭제하는 함수이다

  추가하고 싶거나 아쉬운 점

  • 현재 시간을 불러올 수 있으면 좋을 것 같다.
  • 입력받은 데이터 값을 변경할 수 있으면 좋을 것 같다.
  • css... 디자인...
  • 모두 선택 기능 // 구현했으나 하나만 선택이 안 돼서 실패였다!