PROJECT/Toy Project3 [React] To Do List 만들기 - 3 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguagehtmlcssReact.js배포: Github.io 클릭 📂 컴포넌트 구조📂 src ├── 📂 components │ ├── 📄 AddTodo.js # 할 일 추가 컴포넌트 │ ├── 📄 Container.js # 레이아웃을 담당하는 컨테이너 컴포넌트 │ ├── 📄 Title.js # 타이틀 컴포넌트 │ ├── 📄 TodoList.js # 할 일 목록 컴포넌트 ├── 📄 App.js # 메인 애플리케이션 컴포넌트 └── 📄 App.css # 글로벌 스.. 2024. 10. 14. [React] To Do List 만들기 - 2 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguagehtmlcssReact.js배포: Github.io 클릭 📂 컴포넌트 구조 📂 src ├── 📂 components │ ├── 📄 AddTodo.js # 할 일 추가 컴포넌트 │ ├── 📄 Container.js # 레이아웃을 담당하는 컨테이너 컴포넌트 │ ├── 📄 Title.js # 타이틀 컴포넌트 │ ├── 📄 TodoList.js # 할 일 목록 컴포넌트 └── 📄 App.js # 메인 애플리케이션 컴포넌트 📖 기능할 일 추가할 일 삭제할 일 수정할 일 완료 여부 체크할 일 목록 표시로컬 스토리지 활용 : 페이지를 새로고침하거나 브라우저 닫.. 2024. 9. 30. [React] To Do List 만들기 - 1 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguage htmlcssReact.js배포: Github.io 📂 컴포넌트 구조App├── header└── container ├── TodoForm # 할 일 추가 컴포넌트 └── TodoList # 할 일 목록 컴포넌트 📖 기능할 일 추가할 일 완료 여부 체크할 일 삭제할 일 목록 표시그리고 localStroage에 데이터를 저장해서 새로고침을 해도 데이터가 유지될 수 있도록 했다. 📖 기능 구현1. 할 일 추가(Create)- 할 일을 입력하고 추가 버튼을 클릭하면 list 상태가 업데이트되고 새로운 할 일이 목록에 추가된다. 그리고 입력 필드는 초기화되어 사용자는 다시 새로운 할 일을 입력할 .. 2024. 9. 26. 이전 1 다음
