[22.12.07] TIL

오늘 투두리스트를 만들며 배워본것을 적어보고자 한다.

//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에 다시 할당해주지만, 서로 다른값을 참조하게 된다.
(객체는 참조형으로 ...을 사용 안하고 할당해주면 서로같은 주소를 참조하기 때문에 값 변경 시 정상적으로 되지 않는다)