Conversation
| deleteTask: (task: Task) => void; | ||
| } | ||
|
|
||
| export const TodoContext = createContext<TodoContextType | undefined>(undefined); |
There was a problem hiding this comment.
undefined은 '값이 아직 안 들어옴', null은 '의도적으로 비워둠' 의미가 강합니다! undefined로 해도 동일하게 작동하지만 의미를 명확하게 하기위해 초기값은 null를 사용하는 것이 더 적절해 보입니다
| const [doneTasks, setDoneTasks] = useState<Task[]>([]); | ||
|
|
||
| const addTodo = (text: string) => { | ||
| setTodos([...todos, {id: Date.now(), text }]); |
There was a problem hiding this comment.
state는 비동기로 업데이트되기 때문에, todos를 직접 참조하면 이전 상태값을 참조하는 stale state 문제가 발생할 수 있습니다! setTodos에 prev를 받는 함수형 업데이트를 사용하면 더 안전하게 동작합니다 :) completeTask, deleteTask도 마찬가지로 적용해보면 좋을 것 같아요
| const TodoInput = () => { | ||
| const [value, setValue] = useState(''); | ||
|
|
||
| const context = useContext(TodoContext); |
There was a problem hiding this comment.
현재 각 컴포넌트에서 useContext(TodoContext)를 직접 호출하고 조건문 체크를 반복하고 있는데, 컴포넌트가 많아질수록 코드가 복잡해질 수 있을 것 같습니다! TodoContext.tsx에 커스텀 훅을 정의하고 컴포넌트에서는 이를 호출하는 방식으로 분리하면 더 깔끔하게 관리할 수 있을 것 같아요!
| import { type Task } from '../types'; | ||
| import TodoItem from './TodoItem'; | ||
|
|
||
| interface TodoLiskProps { |
There was a problem hiding this comment.
인터페이스 이름에 오타가 있는 것 같아요 ! Lisk -> List 로 수정하면 좋을 것 같습니다 !
|
|
||
| createRoot(document.getElementById('root')!).render( | ||
| <StrictMode> | ||
| <TodoProvider> |
There was a problem hiding this comment.
현재 App.tsx와 main.tsx 파일 둘다에서 TodoProvider로 감싸고 있어, Context가 이중으로 생성되고 있습니다! 이렇게 되면 각 파일이 서로 다른 독립적인 상태를 가지게 되어 의도치 않은 동작이 나타날 수 있습니다 ! main에 있는 Provider는 제거하고 App.tsx에서만 사용하는 것이 좋을 것 같아요
| @@ -0,0 +1,27 @@ | |||
| import { useState } from 'react'; | |||
There was a problem hiding this comment.
사용하지 않은 import문은 제거해주시는게 좋아요 👍
yewon20804
left a comment
yewon20804
left a comment
There was a problem hiding this comment.
미션 수고하셨습니다 ! TodoList에서 타입을 유니온으로 하여 하나의 컴포넌트에서 처리한 부분이 좋은 것 같아요 ! 코드리뷰 확인해주시면 감사하겠습니다 -!
2 participants
📚 주차 / 미션
📌 작업 내용
✨ 상세 작업 내용
📸 스크린샷
❓ 리뷰어가 알아야 할 사항 / 질문
✅ 체크리스트