오늘은 (6) 월 (11) 일 / 날씨: (Good)
한줄: FOCUS ON WHAT TO DO! 루틴 깨지고 있는 거 알G? 너무 싫지? 선택과 집중
정리해정리
Recoil, TS
useRecoilState
useRecoilValue
useSetRecoilState
export enum Categories{
"TO_DO" = "TO_DO",
"DOING" = "DOING",
"DONE" = "DONE"
}
1)
const handleClick =(category)=>{
console.log(category);
}
<button onClick =(()=>{handleClick("TODO")})>버튼</button>
2)
const handleClick =(e)=>{
console.log(e.currentTarget.name)
const {currentTarget:{name}}=event; //
}
<button name="TODO" onClick={handleClick}>버튼</button>
const toDoSelector = selector({
key:"toDoSelector",
get:({get})=>{
const toDos = get(toDoState);
return [
toDos.filter((toDo)=>toDo.category === Categories.TO_DO)
toDos.filter((toDo)=>toDo.category === Categories.DOING)
toDos.filter((toDo)=>toDo.category === Categories.DONE)
]
}
})
const [toDo, doing,done] =useRecoilValue(toDoSelector);
---
const toDoSelector = selector({
key:"toDoSelector",
get:({get})=>{
const toDos = get(toDoState);
const category = get(categoryState);
return toDos.filter((toDo)=>toDo.category === category);
}
})
const [category, setCategory] = useRecoilState(categoryState);
const handleInput = ()=>{
setCategory(event.currentTarget.value);
}
<select value ={catogory} onInput={handleInput}>
<option value=Categories.TO_DO>TO DO</option>
<option value=Categories.DOING>DOING</option>
<option value=Categories.DONE>DONE</option>
</select>
function ToDo({text,category,id}){
const onClick = (e)=>{
const {currentTarget: {name}} =event;
setToDoos((oldToDos)=>{
const targetIndex = oldToDos.findIndex((toDo)=> toDo.id === id);
const newToDo = {text,id,category};
return [
...oldToDos.slice(0,targetIndex),
newToDo,
...oldToDos.slice(targetIndex+1)
]
})
}
}
Monday/ Wednesday(Tuesday)/ Thursday (Clarisse랑 날짜 조정하기)
Tuesday / Thursday 21 to 22
Saturday 20 to 22
red tide: an event that occurs on the coastline when algae-a plant like organism-grows out of control
arrive home
tour around
stay at the
You've been engaged in our discussions
indeed
make the class more interesting
keep it up
Free time