const DeleteButton = ({ color, backgroundColor, item}) => {
const { todo, setTodo, title, setTitle, content, setContent} = useContext(TodoContext);
const clickRemoveButtonHandler = (id) => {
const newTodo = todo.filter((todo) => todo.id !== id)
setTodo(newTodo)
}
return (
<div>
<button style={{color,backgroundColor}} className= 'button-2'
onClick={clickRemoveButtonHandler(item.id)}>
<FaTrash/>
</button>
</div>
)
}
export default DeleteButton
이 부분에서 갑자기 console.log가 엄청 찍히는 것이었다.
아니 이게 뭐람? 싶어서
error 메세지를 보니,
1. uncaught 어쩌구 하면서 id 값을 찾질 못하고 있고,
2. 미친 듯 콘솔로그를 찍는게 문제였다.
<button style={{color,backgroundColor}} className= 'button-2'
onClick={()=>{clickRemoveButtonHandler(item.id)}}>
<FaTrash/>
</button>
사실 저번에도 같은 문제로.... TIL을 쓴적이 있긴 했는데,
이번에 또 이렇다니..
크크 역시 사람은 변하질 않아..
-> 위의 사례와 같이 clickRemoveButtonHandler와 같은 경우 item.id값을 인자로 받아와야하기 때문에, 어쩔 수 없이 ()를 써야하기 때문에, 이때는 화살표함수 안에 함수를 할당해버리면 해결!
()=>{clickRemoveButtonHandler(item.id)}
function reducer(state, action){
// if(action.type == 'substract'){
// return { count : state.count-1 }
// }
// if(action.type == 'add'){
// return { count : state.count+1 }
// }
switch (action.type){
case "add" :
return state.count + 1
case "substract" :
return state.count - 1
}
}
버튼 구동 자체가 되질 않았다.
콘솔로그 값을 찍어보면, count값 자체를 가져오질 못해서 계속 오류가 났다.
switch (action.type){
case "add" :
return {count : state.count + 1}
case "substract" :
return {count : state.count - 1}
}
}
reducer 함수는 '동일한 인자가 주어졌을 때 항상 동일한 결과를 반환하며 외부의 상태를 변경하지 않는' 순수 함수이다.
따라서 기존의 state를 변경(modify), 추가(add), 덮어쓰지(overwrite) 않고,
기존의 state를 새로운 state로 대체(replace)한다.