React: My Todo List 만들기

윱니·2023년 11월 6일

[React로 My Todo List 만들기]
<구현해야할 기능>
-Todo 추가 하기
-Todo 삭제 하기
-Todo 완료 상태 변경하기 (완료 ↔ 진행중)
<요구사항>
-제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성
-Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링
-Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현
-Layout의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬
-컴포넌트 구조는 자유롭게 구현

컴포넌트에서 사용할 useState를 만들어주었고, 페이지에 나타낼 전체적인 작업을 해주었다

Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링

Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현

마지막에 반복되는 컴포넌트를 재사용할 수 있도록 분리해보는데 생각보다 이해가 부족했던건지 잘 되지 않았다. 이것저것 해보니 분리가 됐는데 조금 더 공부해야할 것 같다. 분리를 하고나니 보기에도 더 편했고 나중에 협업을 할 때도 도움이 될 것 같다.

profile
코린이 탈출을 기원하는 코린이

0개의 댓글