TIL #21 입문주차 개인과제

DO YEON KIM·2024년 5월 14일

React TIL 내일배움캠프 부트캠프 스파르타코딩클럽

부트캠프

목록 보기

21/72

하루 하나씩 작성하는 TIL #21

[React 5기] 입문주차 개인과제

💡 **Goal : My Todo List 만들기**

지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다.
이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨
학습 과제를 끝내고 나면 할 수 있어요!
- 컴포넌트와 리액트 훅 요소(useState)를 다룰 수 있어요.
- 리액트에서 이벤트를 관리할 수 있어요.
- 리액트에서 상태(state)가 무엇인지 확실히 이해할 수 있어요.

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

UI 구현하기
Todo 추가 하기
Todo 삭제 하기
Todo 완료/취소 상태 변경하기 (진행중 ↔ 완료)

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

디자인은 취향대로 해도 되나 화면 구성은 동일하게 해주세요. ✨

제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.
- 예시 영상 보기 화면 기록 2022-06-27 오후 8.16.44.mov
[삭제하기] 버튼을 클릭하면 Working 또는 Done 에 있는 것과 상관없이 삭제처리가 되도록 해주세요.
Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 해주세요. 위 영상을 보면 버튼 내 라벨이 다른 걸 볼 수 있죠?
Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현합니다.
- 예시 영상 보기 화면 기록 2022-06-27 오후 8.20.14.mov
Layout의 최대 너비는 1200px, 최소 너비는 800px로 제한하고, 전체 화면의 가운데로 정렬해주세요.
- 예시 이미지 보기
컴포넌트 구조는 자유롭게 구현해보세요.
- 반복되는 컴포넌트를 찾아서, 직접 컴포넌트를 분리해보시고, 분리한 컴포넌트를 README에 작성합니다.

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

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

❓ **Why: 과제 제출시에는 아래 질문의 답변과 함께 제출해주세요.**

JSX 문법이란 무엇일까요?
사용자가 입력하는 값, 또는 이미 입력된 값, 투두의 타이틀과 같은 애플리케이션의 상태를 관리하기 위해 리액트의 어떤 기능을 사용하셨나요?
애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?
기능 구현을 위해 불변성 유지가 필요한 부분이 있었다면 하나만 설명해 주세요.
반복되는 컴포넌트를 파악하고 재사용할 수 있는 컴포넌트로 분리해 보셨나요? 그렇다면 어떠한 이점이 있었나요?

⚠️ **Warning : 꼭 지켜야 할 것과 하지 않아도 되는 것!**

이것은 꼭 지켜주세요(Do's)
- 과제 요구 사항은 모두 지켜주세요. 특정 기능을 임의로 배제하면 안 됩니다!
이것은 하지 않으셔도 돼요(Don'ts)
- 과제 추가 기획 때문에 고민하지 마세요. 위에 작성된 과제 요구 사항만 지키면 됩니다! → 좋은 예 (⭕ ): "아하, 결국 리액트로 나만의 ‘Todo List’를 만들면 되는거구나!" → 나쁜 예 (❌ ): "다른 기능 페이지가 더 있어야 하지 않을까?"

👉 과제 진행 순서 가이드 (아래 순서대로 과제 진행하시는 것을 권장 드립니다.)

(1) 프로젝트 셋업
- Vite 를 이용해서 리액트 프로젝트를 셋업합니다.
(2) Dummy UI 그리기
- 적절한 css 파일에서 Layout 넓이 (1200px x 800px) 설정부터 합니다.
- 본인이 원하는 디자인대로 html(jsx), css만으로 우선 UI를 그립니다. (예시 디자인을 따라하셔도 좋습니다.)
(3) Todo 추가하기 구현하기
- useState 를 이용해서 todo 상태를 정의합니다.
- 추가하기 버튼 클릭 시 Working 파트로 투두 카드가 추가됩니다.
(4) Todo 삭제하기 구현하기
- 특정 투두카드의 삭제버튼 클릭 시 삭제처리가 됩니다.
(5) Todo 완료상태 변경하기
- 투두 카드의 완료버튼 클릭 시 Working 파트에서 Done 파트로 카드가 이동하며 “완료”텍스트가 ”취소” 텍스트로 변경됩니다.
- 반대로 “취소” 버튼을 클릭하면 Done파트에서 Working 파트로 투두 카드가 이동되며 “완료” 텍스트가 나옵니다.
(6) 작성한 코드에서 보완할 부분 찾아보기
- 투두리스트가 예외사항없이 잘 동작하는 지 직접 테스트 해보고 확인해 봅니다.
- 컴포넌트 분리 등 리팩터링 할 수 있는 부분이 없는 지 살펴봅니다.

1. 프로젝트 셋업

Vite 를 이용해서 리액트 프로젝트를 셋업합니다.

yarn create vite todolist --template react

todolist라는 이름의 react 프로젝트를 만들어준 뒤,

cd todolist

그 프로젝트로 이동해준 후에,

yarn

패키지를 설치해준다.

yarn dev

실행해주면

포트 번호 확인 가능.

2. ummy UI 그리기

적절한 css 파일에서 Layout 넓이 (1200px x 800px) 설정부터 합니다.
- 본인이 원하는 디자인대로 html(jsx), css만으로 우선 UI를 그립니다. (예시 디자인을 따라하셔도 좋습니다.)

일단, 기존 스탠다드반 과제를 베이스로 제작할 수 있는 과제니까 틀을 가져온 뒤, css값을 주기 위해

<div className="container">

요소를 감싸준다.

.container {
  width: 100%;
  max-width: 1200px;
  min-width: 800px;
  background-color: rgb(187, 188, 255);
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}