[TIL] 5주차 금요일. React 입문 주차. 개인 과제 Todo리스트 재제출

해설 강의 보면서 과제 수정하고 재제출

1. CSS 초기 세팅

이번 과제의 CSS 초기 세팅
.layout은 다른 컴퍼넌트를 감싸는 컴퍼넌트의 className

/* css 초기 세팅 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

input,
input:focus,
textarea,
textarea:focus {
  outline: none;
  box-shadow: none;
}

html {
  font-size: 62.5%; /* 1rem을 10px로 변환 (원래는 16px) */
}

.layout {
  font-size: 2rem;
  max-width: 1200px;
  min-width: 880px;
  margin: 0 auto; /* 왼쪽 오른쪽 margin이 동일해짐 */
}

2. className

jsx에선 class="" 대신 className="" 을 사용한다
id는 똑같이 id=""

3. isWorking

클래스명을 isWorking=true/false 여부에 따라 변경해준다.

TodoContainer.jsx return 값

return (
    <>
      <div id="cards-container">
        <div id="cards-working">
          <h2>Working🚴🏻‍♀️✍🏻</h2>
          <ul className="todo-ul">
            {workingTodos.map((todo) => (
              <TodoItem
                key={todo.id}
                todo={todo}
                removeCard={removeCard}
                updateIsDone={updateIsDone}
                isWorking={true}
              />
            ))}
          </ul>
        </div>
        <div id="cards-done">
          <h2>Done✨🎉</h2>
          <ul className="todo-ul">
            {doneTodos.map((todo) => (
              <TodoItem
                key={todo.id}
                todo={todo}
                removeCard={removeCard}
                updateIsDone={updateIsDone}
                isWorking={false}
              />
            ))}
          </ul>
        </div>
      </div>
    </>
  );

TodoItem.jsx

const TodoItem = ({ todo, removeCard, updateIsDone, isWorking }) => {
  return (
    <>
      <li
        className={`todo-li ${isWorking ? "working-li" : "done-li"}`}
        key={todo.id}

        {" "}
        <div>
          <p className="todo-title">{todo.title}</p>
          <p className="todo-body">{todo.body}</p>
        </div>
        <div className="buttons">
          <button
            class="card-btn btn-delete"
            onClick={() => removeCard(todo.id)}

            삭제하기
          </button>
          <button
            className={`card-btn ${
              isWorking ? "btn-to-done" : "btn-to-working"
            }`}
            onClick={() => updateIsDone(todo.id)}

            {isWorking ? "완료" : "취소"}
          </button>
        </div>
      </li>
    </>
  );
};

4. trim

trim : 시작하는 곳과 끝나는 곳에 공백 문자를 제거해줌

 const addCard = (e) => {
    e.preventDefault();
    if (!title.trim || !body.trim) {
      alert("제목과 내용을 모두 입력해주세요");
      return;

5. confirm 창

삭제 함수에 alert와 비슷한데 확인을 누르면 실행되고 취소를 누르면 실행되지 않도록 하는 confirm을 적용했다.
= true/false 값을 리턴받을 수 있는 창을 띄워주는 함수.
자바스크립트의 대화 상자 : alert(경고창) / confirm(선택창) / prompt(입력창)

const removeCard = (id) => {
    if (!confirm("정말로 삭제하시겠습니다?")) {
      return false;
    }
    setTodos(todos.filter((todo) => todo.id !== id));
};