[과제] Lv.1 투두리스트 (React, JavaScript) - Chapter 3

과제 안내

💡 Goal : My Todo List 만들기

• 지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다.
• 이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨
• 학습 과제를 끝내고 나면 할 수 있어요!
  • 컴포넌트와 리액트 훅 요소를 다룰 수 있어요.
  • 이벤트를 관리할 수 있어요.
  • vercel을 이용해 리액트 사이트를 배포할 수 있어요.

⚙ features : 구현해야 할 기능이에요.

• UI 구현하기
• Todo 추가 하기
• Todo 삭제 하기 (화) 17:00까지 완료)
• Todo 완료 상태 변경하기 (완료 ↔ 진행중) (수)까지 17:00완료)

📌 Requirement : 과제에 요구되는 사항이에요.

• 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.
• Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 해주세요. 위 영상을 보면 버튼 내 라벨이 다른 걸 볼 수 있죠?
• Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현합니다.
• Layout의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬해주세요.
• 컴포넌트 구조는 자유롭게 구현해보세요.
  • 반복되는 컴포넌트를 찾아서, 직접 컴포넌트를 분리해보시고, 분리한 컴포넌트를 README에 작성합니다.

📌 Hint : 과제가 어려우신가요?

• 사용한 hook은 오직 useState
• 기능 구현을 위해 생성한 함수는 2개 입니다. onChangeHandler , onSubmitHandler
• 사용한 javascript 내장 메서드는 map, filter 입니다.
• todo의 initial state는 {id: 0, title: “”, body: “”, isDone: false} 입니다.

• 예시 사이트 : https://hh99-react-lv1.vercel.app/

---

풀이 과정

1. 구현 과정

1. 대략적으로 html 구조 짜고 클래스명 부여
2. 기능 없는 단순 UI 컴포넌트 분리(Header)
3. 강의 참고하여 입력값 받고 추가하는 부분 구현
4. isDone에 따라 값 분리하여 따로 렌더링하기
5. 컴포넌트 기능별로 분리
6. 코드 리뷰/수정

2. 컴포넌트 설명 

1. App.jsx

• 메인 컴포넌트
• state로 투두 객체를 저장했고, 초기값을 두 개 넣어주었습니다.
• return문을 통해 페이지의 헤더를 담당하는 Header.tsx, 투두를 입력받고 투두리스트에 추가해주는 TodoForm.tsx, 투두리스트를 진행중/완료로 나누어 출력해주는 RenderTodos.tsx를 렌더링합니다.
• TodoForm.tsx의 props로 todos와 setTodos를 전달합니다.
• RenderTodos.tsx의 props로 todos와 setTodos, 진행중/완료를 구분할 때 사용할 isDone을 전달합니다.

2. Header.jsx

• 헤더를 구성하는 제목과 React를 렌더링하는 컴포넌트입니다.

3. TodoForm.jsx

• 투두를 입력받는 input과 버튼을 렌더링하고, input으로 받아온 값을 투두리스트에 추가해주는 역할을 하는 컴포넌트입니다.

4. RenderTodos.jsx

• 투두리스트를 진행중/완료로 나누어주고, 이에 따라 생성된 새로운 todos를 Todos.tsx를 통해 출력해주는 역할을 합니다.
• props로 받은 todos를 filter 메서드를 통해 순회하면서 props로 넘겨받은 isDone과 각각 투두의 isDone 을 바교하여 true인 todo와 false인 todo들만을 가진 새로운 배열을 생성합니다.
• return문을 통해 isDone 값으로 진행중/완료 문구를 출력해주고, 새로 만들어진 배열의 길이가 0보다 크면 map 메서드를 통해 하나씩 순회하면서 Todos.tsx를 렌더링합니다.
• Todos.tsx의 props로 todos, setTodos, 각 todo, key값인 todo.id를 전달합니다.

5. Todo.tsx

• RenderTodos의 자식 컴포넌트로, RenderTodos로 걸러진 투두를 하나씩 렌더링해주고, 삭제와 진행중/완료 작업을 하는 컴포넌트입니다.
• 삭제하기 버튼의 onClick을 통해 현재 투두의 id를 인자로 넘겨주고, 삭제 함수에서 filter를 통해 현재 id와 인자의 id가 같지 않은 todo들을 새로운 배열에 저장해준 후 setTodos로 상태를 변경해줍니다.
• 완료/취소 버튼의 onClick을 통해 현재 투두의 id를 인자로 넘겨주고, 완료 함수에서 map을 통해 현재 id와 인자의 id가 같은 경우 현재 투두를 복사하여 isDone값을 반대로 바꿔준 배열을 생성합니다. 이를 setTodos로 상태를 변경해줍니다.

---

3. 최종 코드 & 배포 

https://github.com/jwc406/assignment_Lv1

GitHub - jwc406/assignment_Lv1: 주특기주차 레벨1 과제입니다.

https://assignment-lv1.vercel.app/

React App