<추가 사항>
※체크박스 체크 유무에 따라 할 일 완료 표시
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;
}
'노마드코더 > REACT 크롬 앱' 카테고리의 다른 글
CHROME APP (0) | 2024.02.05 |
---|---|
11. 시간에 따른 Title (0) | 2024.02.04 |
9. 오늘의 할 일 추가, 삭제 (0) | 2024.02.03 |
8. OpenWeatherMap API 가져오기 (0) | 2024.02.01 |
7. 위도, 경도 불러오기 (0) | 2024.02.01 |