10. 체크박스 체크 유무 확인

<추가 사항>

※체크박스 체크 유무에 따라 할 일 완료 표시

 

componenet

  -Input.jsx

  -Button.jsx

  -Checkbox.jsx

module

  -Login.jsx

  -Clock.jsx

  -Weather.jsx

  -ToDoList.jsx

page

  -ChromeApp.jsx

css

  -List.css

img

  -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg

 

component - <Input.jsx>

import React from 'react'

function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) {
  return (
    <div>
      <input
        className={className}
        type={type}
        name={name}
        value={value}
        onChange={onChange}
        maxLength={maxLength}
        placeholder={placeholder}
        checked={checked} //체크 유무
      />
    </div>
  )
}

export default Input

 

component - <Checkbox.jsx >

import React from 'react'
import '../css/List.css'
import Input from './Input'
import Button from './Button'

function Checkbox({id, checkBool, listContent, removeList, checkToggle}) {
  const changeCheckBool = () => {
    checkToggle(id) //체크박스 체크 유부 확인
  }

  const handleRemoveList = () => {
    removeList(id)
  }

  return (
    <div className="checkboxDiv" key={id}>
      <Input
        type={'checkbox'}
        className={'checkboxInput'}
        checked={checkBool}
        onChange={changeCheckBool}
      />
      <p className={checkBool ? 'checkboxP_2' : 'checkboxP_1'}>{listContent}</p>
      <Button name={'X'} onClick={handleRemoveList} className={'deleteListButton'} />
    </div>
  )
}

export default Checkbox

 

module - <ToDoList.jsx >

import React, {useEffect, useRef, useState} from 'react'
import '../css/List.css'
import Input from '../component/Input'
import Button from '../component/Button'
import Checkbox from '../component/Checkbox'

function ToDoList() {
  const [listValue, setListValue] = useState('')
  const [todoList, setToDoList] = useState(
    JSON.parse(localStorage.getItem('todoList')) || []
  )

  const listKey = useRef(parseInt(localStorage.getItem('ListKey')) || 0)

  const changeListValue = event => {
    setListValue(event.target.value)
  }

  const addList = event => {
    event.preventDefault()
    const checkBool = false
    const newList = {
      listContent: listValue,
      id: listKey.current,
      checked: checkBool //체크 false, true
    }
    listKey.current += 1
    setToDoList([newList, ...todoList])
    setListValue('')
  }

  const removeList = id => {
    setToDoList(todoList.filter(remove => remove.id !== id))
  }

  const checkToggle = id => { //체크박스 false, true로 수정
    setToDoList(
      todoList.map(toggle =>
        toggle.id === id ? {...toggle, checked: !toggle.checked} : toggle
      )
    )
  }

  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todoList))
    localStorage.setItem('ListKey', parseInt(listKey.current))
  })

  return (
    <div>
      <div>
        <form className="todoListInputForm">
          <Input
            type={'text'}
            className={'todoListInput'}
            value={listValue}
            onChange={changeListValue}
          />
          <Button name={'추가'} type={'submit'} onClick={addList} />
        </form>
      </div>
      <div>
        {todoList.map(listData => {
          return (
            <Checkbox
              key={listData.id}
              {...listData}
              checkBool={listData.checked} //체크박스 값
              removeList={removeList}
              checkToggle={checkToggle} //체크박스 체크 유무 함수
            />
          )
        })}
      </div>
    </div>
  )
}

export default ToDoList

 

List.css

.checkboxP_1 {
  margin-right: auto;
}
.checkboxP_2 {
  margin-right: auto;
  color: gray;
  text-decoration: line-through;
}