조민영 과제 제출 합니다 #4
Conversation
| <tr key={Todo.Id}> | ||
| <td> | ||
| <label htmlFor="chBox"> | ||
| <input | ||
| type="checkbox" | ||
| onChange={() => isitDone(Todo.Id)} | ||
| checked={Todo.isDone} | ||
| value={Todo.Id} | ||
| /> | ||
| </label> | ||
| </td> | ||
| <td> | ||
| <span id="span">{Todo.todoText}</span> | ||
| </td> | ||
| <td> | ||
| <button onClick={() => decrease(Todo.Id)} value={Todo.Id} className="d"> | ||
| 삭제 | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| )); |
There was a problem hiding this comment.
table로 작성하신 이유가 뭔지 알려주세요!
| </tr> | ||
| )); | ||
|
|
||
| const [sum, setSum] = useState(0); |
There was a problem hiding this comment.
훅들은 최상위에 작성하는 것이 규칙입니다.
| setSum(sum + 1); | ||
| }; | ||
| const decrease = (id) => { | ||
| d(id); |
There was a problem hiding this comment.
함수 이름을 의미있게 작성해보는 습관을 가져볼까요?
d함수가 뭔지 다른 사람이 코드를 봤을 때 알기 어려울 것 같아요.
| if (todoText == "") { | ||
| alert("등록할 일정을 입력해주세요!"); | ||
| } else { | ||
| const newTodo: Todos = { | ||
| Id: indexT, | ||
| todoText: todoText, | ||
| isDone: false, | ||
| }; | ||
| setTodo([...Todo, newTodo]); | ||
| increase(); | ||
| indexT += 1; | ||
| setTodoText(""); | ||
| } | ||
| }; |
There was a problem hiding this comment.
공백검사가 되지 않네요 또한 early return에 대해 알아보시고 early return과 if else의 차이는 무엇일지 공부해보세요!
| const filterSum = Todo.filter((todo) => todo.isDone == true); | ||
| setSum(filterSum.length); | ||
| Todo.map((todo) => (todo.isDone == false ? strikeLine() : nonStrike())); | ||
| }; | ||
|
|
||
| const strikeLine = () => { | ||
| const c = document.getElementById("span"); | ||
| c.style.textDecoration = "line-through"; | ||
| }; | ||
|
|
||
| const nonStrike = () => { | ||
| const c = document.getElementById("span"); | ||
| c.style.textDecoration = ""; | ||
| }; |
There was a problem hiding this comment.
css를 적용하기 위해 함수를 작성하신 것 같은데 react에서는 직접 dom을 조작해서 스타일을 하지 않습니다. 실제로 적용도 되지 않는 것 같아보이고요. 어떤 상황에 스타일을 적용해야한다면 className에 특정 조건에 이 스타일을 적용해라라는 삼항연산자를 사용할 수 있어요!
| className="place" | ||
| type="text" | ||
| value={todoText} | ||
| onChange={(t) => setTodoText(t.target.value)} |
There was a problem hiding this comment.
여기서 t가 무엇인가요? t가 하는 역할이 뭐고 이렇게 작성하신 이유를 알려주세요.
| //1. 인풋으로 입력한 내용이 todoText로 들어가야함--함수 연결해서 바뀐 값을 배열에 추가하fail.useState하기 | ||
| //2. 속성과 체크박스 연결시키기--useState | ||
| //3. sum--useState그리고 어케 연결? | ||
| //4. 체크박스 모양 바꾸기--이건 이지 | ||
| //5. 삭제 버튼을 계속 옆에 띄우는 법?--걍 넣어벌임 | ||
| //6. 컴포넌트를 어떻게 쪼개지?--쪼개지말자.. |
There was a problem hiding this comment.
과제를 제출할 땐 불필요한 주석은 제거해주세요.
| //4. 체크박스 모양 바꾸기--이건 이지 | ||
| //5. 삭제 버튼을 계속 옆에 띄우는 법?--걍 넣어벌임 | ||
| //6. 컴포넌트를 어떻게 쪼개지?--쪼개지말자.. | ||
| let indexT = 1; |
There was a problem hiding this comment.
리액트에서는 관리해야하는 값에 대해 state라는 개념을 사용합니다.
리액트 상태관리에 대해 공부해보세요!
노션 web자료에 리액트 공식문서에 들어가셔서 State: 컴포넌트의 기억 저장소 글을 읽어보시길 추천드려요.
| const newTodo: Todos = { | ||
| Id: indexT, | ||
| todoText: todoText, | ||
| isDone: false, | ||
| }; | ||
| setTodo([...Todo, newTodo]); | ||
| increase(); | ||
| indexT += 1; | ||
| setTodoText(""); |
There was a problem hiding this comment.
id는 "관리해야하는 값"에 속하기 때문에 state로 관리를 하셔야 합니다.
또한 indetT와 Increase는 무슨 역할인가요? sum state는 무엇을 관리하는 state인가요?
Description
약간의..챗 지피티의 도움을..받았습니다..
Important content
Question
Reference