<추가 사항>
오늘의 할 일을 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;
}
'노마드코더 > REACT 크롬 앱' 카테고리의 다른 글
11. 시간에 따른 Title (0) | 2024.02.04 |
---|---|
10. 체크박스 체크 유무 확인 (0) | 2024.02.04 |
8. OpenWeatherMap API 가져오기 (0) | 2024.02.01 |
7. 위도, 경도 불러오기 (0) | 2024.02.01 |
6. Background Image (0) | 2024.01.27 |