미니 프로젝트) 간단한 to-do list 구현하기

1. 프로젝트 소개

• 간단한 To-Do List 앱을 React와 JavaScript로 구현한 프로젝트입니다. 이 프로젝트에서는 특히 props를 제대로 이해하고 사용하려는 목표를 가지고 진행하였습니다.

2. 기술 스택 및 환경

• 사용한 기술: React, styled-components
• 개발 환경: VSCode

3. 프로젝트 기능 설명

• 핵심 기능: 할 일을 추가하고, 완료한 일정은 삭제할 수 있도록 할 수 있습니다.
• UI/UX:

  

• 사용자는 할 일을 입력하고, 등록 버튼을 누르면 해당 항목이 목록에 추가됩니다.
• 완료된 일정을 삭제 버튼을 통해 제거할 수 있습니다.

4. 코드 설명

메인화면에 렌더링 될 코드

하단의 일정 게시판을 렌더링 하는 코드

게시판에 일정 추가 및 삭제를 할 수 있게 만드는 코드

• App.js: useState로 상태를 관리하여 할 일 목록을 저장하고, 사용자가 입력한 값을 처리합니다. AddItem 함수로 할 일을 추가하고, RemoveItem 함수로 할 일을 삭제합니다.
• TodoBorder.js: Todo 목록을 감싸는 스타일링된 컴포넌트로, 목록을 TodoList 컴포넌트를 통해 표시합니다. todoList와 removeItem의 props를 받아서 할 일을 표시하고 삭제할 수 있습니다.
• TodoList.js: 각각의 할 일 항목을 보여주는 컴포넌트로, 삭제 버튼을 눌러 해당 항목을 삭제합니다

5. 배운 점

• 학습한 내용: 프로젝트를 진행하면서 props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고 받는 방법에 대해 이해하게 되었습니다. 또한 useState를 사용하여 상태를 관리하는 방식과 이를 통해 동적인 UI를 구성하는 방법을 배웠습니다.
• 성장한 점: 상태 관리와 컴포넌트 간 데이터 흐름을 명확히 이해하고, React에서의 동적 콘텐츠 처리 방식에 자신감을 가지게 되었습니다.

6. 향후 개선점 및 계획

• 개선할 점: 일정 수정 기능을 추가하면 유용할 것 같습니다. 각 일정에 고유한 key 값을 부여하여 수정할 수 있도록 구현할 수 있을 것입니다.
• 추가 기능: 일정에 우선순위 기능이나 알림 기능을 추가해 더 실용적인 앱으로 확장할 수 있습니다.

7. 결론

• 정리: 이 Todo List 프로젝트를 통해 React의 핵심 개념을 실제로 적용해 보았고, 향후 더 복잡한 프로젝트를 다루는 데 큰 도움이 될 것입니다.