Personal Project : TodoList

---

React 입문 주차 개인 과제 TodoList 만들기

📋목차

---

1. 프로젝트 소개
2. 개발 환경
3. 개발 과정 및 기능 소개
4. 컴포넌트 분리

프로젝트 소개

---

TodoList는 할 일을 추가하고, 완료시 완료리스트에 취소시 다시 , 할일 리스트로 돌아오게 할 수 있는 기능을 구현하였습니다.

개발 환경

---

개발 과정 및 기능 소개

---

state의 활용을 익히는 시간이었다. state를 활용해 react의 리렌더링의 이해도를 높일 수 있는 시간이었고, 추가, 삭제 ,변경 등 3가지 기능을 활용해 개발을 진행했다.

• 추가 기능 : IputBox를 통해 value값을 받고 추가하기 버튼을 누르면 새로운 리스트(리스트에는 ID , 제목, 내용, 완료여부가 들어간다.)를 추가해 주는 기능이다.![[Pasted image 20230208133757.png]]

• 삭제 기능 : 위의 사진에 삭제 버튼을 누르면 리스트에서 ID값을 매칭해 해당 ID를 제외하고 나머지 리스트를 보여준다. ![[Pasted image 20230208134110.png]]

• 변경 기능 (완료 & 취소) : 완료 or 취소 버튼을 누를시 해당ID와 일치하는 리스트에서 완료버튼 누를시 isDone을 true로 취소버튼 누를시 isDone을 false로 변경해 보여지는 위치를 달리하는 기능이다. ![[Pasted image 20230208135027.png]]

컴포넌트 분리

---

• App : 가장 최상위 컴포넌트이다.
• Header : header 부분을 나타내는 컴포넌트이다.
• Input : 할일 리스트의 제목과 내용을 받아오는 Input박스와 추가하기 기능이 있는 컴포넌트이다.
• List : 해야할 일리스트와 완료리스트를 구분하여 보여질 수 있게하는 컴포넌트이다.
• Edit : 삭제버튼을 누르면 해당 리스트는 페이지에 보여지지 않게 하고, 완료 버튼을 누를시 isDone을 true로 바꿔주는 기능을 하는 컴포넌트이다.