Conversation
bk-git-hub
left a comment
bk-git-hub
left a comment
There was a problem hiding this comment.
유미님 고생하셨습니다
전반적으로 이번 주 목표에 맞게 잘 구현해 주셨습니다.
이번주 코멘트는 불필요한 부분 지우는 위주로 달아두었습니다
| const checkIcon = "✅"; | ||
| const title = "오늘의 할일"; | ||
| import TodoHeader from "./TodoHeader"; | ||
| import TodoCard from "./TodoCard"; |
There was a problem hiding this comment.
TodoCard는 현재 이 파일에서 사용중이지 않으니 임포트를 지워주시면 좋습니다
| export default function TodoList() { | ||
| const cardsList = todoItems.map((todoItems) => ( | ||
| <TodoCard | ||
| key={todoItems.key} |
There was a problem hiding this comment.
key는 리액트가 리스트비교용으로 사용하는 특별한 prop이라서 TodoCard 내부 props로는 내려오지 않아요. 식별값이 필요하다면 key 대신 id 같은 별도 필드로 넘겨주는 쪽이 더 자연스럽습니다.
| key, | ||
| text, | ||
| isChecked, | ||
| }: { | ||
| key: number; | ||
| text: string; | ||
| isChecked: boolean; | ||
| }) { |
There was a problem hiding this comment.
TodoList 에서 언급한 부분입니다. key prop은 일반적으로 사용이 안됩니다
| import { todoItems } from "./data"; | ||
|
|
||
| export default function TodoList() { | ||
| const cardsList = todoItems.map((todoItems) => ( |
There was a problem hiding this comment.
map 콜백 변수 이름이 배열 이름과 같아서 조금 헷갈릴 수 있어요. todoItem처럼 단수형으로 바꾸면 읽기가 더 편해집니다
| return ( | ||
| <> | ||
| <li className={"todoCard " + (isChecked ? "checked" : "")}> | ||
| <input type="checkbox" checked={isChecked} key={key} /> |
There was a problem hiding this comment.
지금은 체크 상태를 화면에만 보여주는 단계라서 readOnly를 함께 적어 두면 좋아요. onChange로 상태를 바꾸는 방식은 다음에 state를 배운 뒤에 연결하면 더 자연스럽게 이해할 수 있습니다.
| } | ||
| return ( | ||
| <> | ||
| <ul id="todoList" className="control-container"> |
There was a problem hiding this comment.
control-container클래스는 현재 연결된 스타일이 없어서 지우셔도 될듯 합니다.
2 participants
✅ 제출 정보
✅ 체크리스트 (필수)
main이 아니라 내 GitHub 핸들 브랜치(<handle>)다<handle>-week-xx형식이다🧩 구현 내용 요약
❓ 궁금한 점