Intro🐥

'한 입 크기로 잘라 먹는 리액트'교재의 Project02를 구현해보려고합니다.
구현을 어느정도 하고 알게된건데 Project01 구현을 아직 덜 했더라구요.
Project02 마무리되면 Project01을 마무리 하려고 합니다.

이 장의 학습 목표

• 두 번째 프로젝트 [할 일 관리] 앱을 만듭니다.

• 프로젝트에서 요구사항 분석, UI, 기능 구현의 흐름을 이해합니다.

• CRUD 기능 구현이 무엇인지 이해합니다.
  
  

프로젝트 준비하기

1. 요구사항 분석하기

• 오늘의 날짜를 요일, 월, 일, 연도순으로 표시합니다.

• 할 일(Todo)을 작성하는 입력 폼이 있고, <추가>버튼을 클릭하면 할 일 아이템을 생성합니다.

• [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있습니다.

• 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 <삭제> 버튼으로 이루어져 있습니다.
  
  

2. 컴포넌트로 나누기

요구사항 분석에 맞게 페이지의 각 UI 요소를 역할에 따라 구분할 수 있도록 컴포넌트 단위로 나눠야합니다.

• Header 컴포넌트
  오늘의 날짜를 표시 형식에 맞게 보여줍니다.
  
• TodoEditor 컴포넌트
  새로운 할 일 아이템을 등록합니다.
  
• TodoList 컴포넌트
  검색어에 맞게 필터링된 할 일 리스트를 렌더링합니다.
  (만약 검색 폼이 공백이면 필터링하지 않습니다.)
  
• TodoItem 컴포넌트
  기본 정보 외에도 체크박스와 <삭제> 버튼이 있습니다.
  체크박스를 클릭하면 할 일을 마쳤는지 여부가 토글되고, <삭제>버튼을 클릭하면 해당 아이템을 삭제합니다.
  

3. 리액트 앱 만들기

• npx create-react-app . 명령으로 리액트 앱을 생성

• 4개의 불필요한 파일 삭제
  src/App.test.js
  src/logo.svg
  src/reportWebVitals.js
  setupTest.js