오늘 투두리스트를 만들며 배워본것을 적어보고자 한다.
//App.jsx
<div className='card-box'>
{todos.map((todo) => {
if (todo.isDone == true) {
return (
<Cards
handleDelete={deleteTodoHandler}
todo={todo}
key={todo.id}
></Cards>
);
}
})}
</div>
이렇게 props로 정보를 전달해주기 위해서는, "무엇을" "무슨이름으로" 전달해줄지 명시를 해주어야 한다.
export default function Cards(props) {
return (
<div className='card-container'>
<p className='card-title'>{props.todo.title}</p>
<p className='card-todo'>{props.todo.todo}</p>
<div className='card-buttons'>
<button
className='card-del-bt'
onClick={() => {
props.handleDelete(props.todo.id);
}}
>
삭제하기
</button>
<button
className='card-clear-bt'
onClick={() => {
return props.todo.isDone
? props.handleCancel(props.todo.id)
: props.handleComplete(props.todo.id);
}}
>
{props.todo.isDone ? '취소' : '완료'}
</button>
</div>
</div>
);
}
내가 적은건 props를 받아 props.todo.title 이런식으로 전달해줬는데,
구조분해할당을 이용하면 가독성이 더 좋아질것같다.
export default function Cards(props) {
****const {handleDelete, todo, key} = props;****
return (
<div className='card-container'>
<p className='card-title'>{todo.title}</p>
<p className='card-todo'>{todo.todo}</p>
<div className='card-buttons'>
<button
className='card-del-bt'
onClick={() => {
handleDelete(todo.id);
}}
>
삭제하기
</button>
<button
className='card-clear-bt'
onClick={() => {
return todo.isDone
? phandleCancel(todo.id)
: handleComplete(todo.id);
}}
>
{todo.isDone ? '취소' : '완료'}
</button>
</div>
</div>
);
}
export default function Cards({handleDelete, todo, key}) {
return (
.....
);
}
이렇게 위만 바꿔주면 된다.
useState로 값 변경 시 set... 을 사용하고,
set... 을 사용해 어떤 값을 복사? 해서 써야할 때에는
const copyTodos = [...todos];
요런식으로 ... 을 이용해서 복사해온다.
이렇게 쓰는 이유는 저 ... 을 사용해서 복사하면 객체를 copyTodos에 다시 할당해주지만, 서로 다른값을 참조하게 된다.
(객체는 참조형으로 ...을 사용 안하고 할당해주면 서로같은 주소를 참조하기 때문에 값 변경 시 정상적으로 되지 않는다)
오늘도 좋은 글 감사합니다.