9. 오늘의 할 일 추가, 삭제

<추가 사항>

오늘의 할 일을 todoList 형태로 만들어서 추가, 삭제 기능 구현

※ToDoList 모듈 추가, Checkbox 컴포넌트 추가

※map 함수를 이용해서 todoList 나타냄

  -map(): 반복되는 컴포넌트를 렌더링

※useRef 훅으로 todoList key 값 설정

  -useRef : DOM에 접근하기 위해 사용

※ filter 함수를 이용해서 일기 삭제

   -filter() : 주어진 함수의 조건을 만족하는 배열의 요소들만 모아(true면 유지, false면 버림) 새로운 배열로 반환함.

※ diaryKey이 중복되지 않도록 localStorage에 diaryKey 저장

 

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 - <Checkbox.jsx >

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

function CheckboxList({id, listContent, removeList}) {
  const handleRemoveList = () => { //리스트 삭제 함수
    removeList(id)
  }

  return (
    <div className="checkboxListDiv" key={id}>
      <Input type={'checkbox'} className={'checkboxInput'} />
      <p className="checkboxP">{listContent}</p>
      <Button name={'X'} onClick={handleRemoveList} className={'deleteListButton'} />
    </div>
  )
}

export default CheckboxList

 

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 CheckboxList from '../component/CheckboxList'

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 newList = {
      listContent: listValue,
      id: listKey.current
    }
    listKey.current += 1
    setToDoList([newList, ...todoList])
    setListValue('')
  }

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

  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 <CheckboxList key={listData.id} {...listData} removeList={removeList} />
        })}
      </div>
    </div>
  )
}

export default ToDoList

 

App.js

import React from 'react'
import ToDoList from './module/ToDoList.jsx'

function App() {
  return (
    <div>
      <ToDoList />
    </div>
  )
}

export default App

 

List.css

.checkboxDiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
}
.checkboxInput {
  margin-right: 20px;
  width: 18px;
  height: 18px;
}
.checkboxP {
  margin-right: auto;
}

.todoListForm {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.todoListInput {
  margin-right: 20px;
}

.deleteListButton {
  background-color: transparent;
  border: 0px;
  width: 18x;
  height: 18px;
}