import React, { useState } from 'react'
import './App.css'
const App = () => {
//초기값 설정
const [initial, setInitial] = useState([
{id:0, what:'', when:'', isDone:''}
])
//클릭하면 달라지는 값을 위해 useState를 활용한다.
//현재상태:all, 바뀐 최신상태:setAll, 초기값:useState()괄호 안의 값
//isDone이 false면 진행중, isDone이 true면 완료
const [all, setAll] = useState([
{id:1, what:'공부하기', when:'목요일까지', isDone:false},
{id:2, what:'운동하기', when:'금요일까지', isDone:true},
])
//input에 입력 값
const [what, setWhat] = useState('')
const [when, setWhen] = useState('')
const writeWhat = (event) => {
setWhat(event.target.value)
}
const writeWhen = (event) => {
setWhen(event.target.value)
}
//버튼을 누르면 값이 추가되도록 한다.
//setAll안에 현재 상태인 all과, 추가한 후 새롭게 바뀐 addList를 넣어준다.
const addButton = () => {
//제목과 내용 모두 채워야 추가 가능
if(what.trim()===''|| when.trim()==="")return;
const addList = {
id: all.length + 1,
what:what,
when:when
}
setAll([...all, addList])
}
//버튼을 누르면 삭제되도록 한다.
//id값을 잡고, filter로 잡은 id값과 all안의 id값이 같지 않으면 걸러지도록 한다.(삭제됨)
const removeButton = (id) => {
const newAll = all.filter(all => all.id !== id)
setAll(newAll)
}
//버튼을 누르면 완료-진행중 상태를 변경하도록 한다.
//map함수로 돌리는데, 조건을 걸어서
//만약 all안의 id와 잡아온 id의 값이 같으면 isDone의 상태를 반대로 바꿔준다.
//아니라면 그대로 하도록 한다.
const onAdd = (id) => {
const addWorkiing = all.map((initial) => {
if(initial.id === id){
return{
...initial,
isDone: !initial.isDone,
}
}else {
return{...initial}
}
})
setAll(addWorkiing)
}
//---jsx부분---
return (
<section>
<div className='wrap'>
<div className='nav'>MY TODO LIST</div>
<div className='write'>
<div>
<label>제목</label>
<input value={what} onChange={writeWhat} />
<label>내용</label>
<input value={when} onChange={writeWhen} />
</div>
<button onClick={addButton}>+</button>
</div>
{/* ----- */}
<div className='addList'>
<div className='working'>Working 🔥</div>
{
all.map((item) => {
if(!item.isDone){
return (
<div key = {item.id}>
<div className='checkList'>
<div>🐈 {item.what} / {item.when}</div>
<div className='buttons'>
<button onClick={() => onAdd(item.id)}>
{item.isDone? 'cancel' : 'check'}
</button>
<button onClick={()=> removeButton(item.id)}>X</button>
</div>
</div>
</div>
)
}else {
return null;
}
})}
</div>
<div className='addDoneList'>
<div className='done'>Done 🎉</div>
{
all.map((item) => {
if(item.isDone){
return (
<div key = {item.id}>
<div className='checkList'>
<div>🐈 {item.what} / {item.when}</div>
<div className='buttons'>
<button onClick={() => onAdd(item.id)}>
{item.isDone? 'cancel' : 'check'}
</button>
<button onClick={()=> removeButton(item.id)}>X</button>
</div>
</div>
</div>
)
}else{
return null;
}
})}
</div>
</div>
</section>
)
}
export default App
App.js
import React from 'react'
import TodoList from './pages/TodoList';
function App() {
return (<TodoList />)
}
export default App;
TodoList.js
import React, { useState } from 'react'
import Layout from '../components/layout/Layout'
import Form from '../components/form/Form'
import State from '../components/state/State'
function TodoList() {
const [input, setInput] = useState([
{id:1, title:'공부하기', comment:'목요일까지', isDone:false},
{id:2, title:'운동하기', comment:'금요일까지', isDone:true},
])
return (
<Layout>
<Form input={input} setInput={setInput}/>
<State input={input} setInput={setInput}/>
</Layout>
)
}
export default TodoList
Layout.js
import React from 'react'
import '../../css/layout/layout.css'
const Layout = (props) => {
return <div className='layout'>{props.children}</div>
}
export default Layout
Form.js
import React, { useState } from 'react'
import '../../css/form/form.css'
function Form({input, setInput}) {
const [title, setTitle] = useState('')
const [comment, setComment] = useState('')
const addTitle = (event) => {
setTitle(event.target.value)
}
const addComment = (event) => {
setComment(event.target.value)
}
const onSubmitHandler = (event) => {
event.preventDefault(); // 새로고침 방지, 다른 링크 이동 방지
if(title.trim() === '' || comment.trim() ==='') return
const addList = {
id:input.length +1,
title:title,
comment:comment,
}
setInput([...input, addList])
}
return (
<form onSubmit={onSubmitHandler} className='form' >
<h2 className='titlebox'>MY TODO LIST</h2>
<div className='input-group'>
<label>WHAT?</label>
<input value={title} onChange={addTitle} />
<label>WHEN?</label>
<input value={comment} onChange={addComment}/>
<button>+</button>
</div>
</form>
)
}
export default Form
State.js
import React, { useState } from 'react'
import '../../css/state/state.css'
function State({input, setInput}) {
const onAdd = (id) => {
const addWorking = input.map((initial) => {
if(initial.id === id){
return{
...initial,
isDone:!initial.isDone,
}
}else {
return{...initial}
}
})
setInput(addWorking)
}
const remove = (id) => {
const removeList = input.filter(item => item.id !==id)
setInput(removeList)
}
return (
<div className='list'>
<div className='working'>
<h3>Working 🔥</h3>
{ input.map((item) => {
if(!item.isDone){
return(
<div key={item.id}>
<div className='checkList'>
<div>{item.title} - {item.comment}</div>
<div className='changeButton'>
<button onClick={() => onAdd(item.id)}>
{item.isDone? '취소':'완료'}
</button>
<button onClick={() => remove(item.id)}>삭제</button>
</div>
</div>
</div>
)
}
})
}
<div className='done'>
<h3>Done 🎉</h3>
{ input.map((item) => {
if(item.isDone){
return(
<div key={item.id}>
<div className='checkList'>
<div>{item.title} - {item.comment}</div>
<div className='changeButton'>
<button onClick={() => onAdd(item.id)}>
{item.isDone? '취소':'완료'}
</button>
<button onClick={() => remove(item.id)}>삭제</button>
</div>
</div>
</div>
)
}
})
}
</div>
</div>
</div>
)
}
export default State