-
[22.12.07] TILTIL 2022. 12. 19. 21:11
오늘 투두리스트를 만들며 배워본것을 적어보고자 한다.
//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에 다시 할당해주지만, 서로 다른값을 참조하게 된다.
(객체는 참조형으로 ...을 사용 안하고 할당해주면 서로같은 주소를 참조하기 때문에 값 변경 시 정상적으로 되지 않는다)'TIL' 카테고리의 다른 글
[22.12.09] TIL (0) 2022.12.19 [22.12.08] TIL (0) 2022.12.19 [22.12.06] TIL (0) 2022.12.19 [22.12.05] TIL (0) 2022.12.19 [22.11.30] TIL (0) 2022.12.19