✅ ToDoList

---

나만의 투두리스트를 작성해보세요!

▶️ 프로젝트 소개

---

• 내일배움캠프에서 진행하는 react 개인 프로젝트
• 개발 기간 : 05.14~05.16
• 개발 언어 : React
• github 링크 : 바로가기
  
  
  
  

🌟 이렇게 구현했어요

---

• localStorage를 이용해서 todolist를 저장, 수정, 삭제 하게 했어요
• swiper를 사용해서 card를 옆으로 넘길 수 있게 했어요.

🗂️ 폴더 구조

---

📦public
 ┗ 📜todo-Icon.svg
📦src
 ┣ 📂components
 ┃ ┣ 📜CardListItem.jsx
 ┃ ┣ 📜Header.jsx
 ┃ ┗ 📜ListContainer.jsx
 ┣ 📂styles
 ┃ ┣ 📜App.css
 ┃ ┣ 📜CardListItem.css
 ┃ ┣ 📜Header.css
 ┃ ┣ 📜index.css
 ┃ ┣ 📜ListContainer.css
 ┃ ┗ 📜reset.css
 ┣ 📜App.jsx
 ┗ 📜main.jsx

🔖 components 설명

• Header : todolist를 저장할 수 있게 하고 빈칸이나 글자가 30이 넘을 시 등록
• ListContainer : todolist를 불러오고 swiper로 슬라이드
• CardListItem : props를 받아서 item안에 정보를 저장 및 todolist 수정, 삭제 기능

🖥️ 화면 구현

---

[🔽todolist 등록]

[🔽todolist 완료]

[🔽todolist 삭제 및 card 슬라이드]

💬 회고

---

리액트 입문주차라서 비교적 쉬운 과제였지만, 리액트 컴포넌트를 나눠서 사용하고 props를 전달하고 state 불변성을 체험하게 되어서 뜻깊은 것 같다. 하지만 todolist를 저장..하는 것을 localStorage를 이용해서 구현하려고 하니까 localStorage안의 값이 바뀔때 리렌더링이 안되는 그런 불상사가 일어났다.. 커스텀 훅을 사용하면 되는것 같은데 아직 실력이 부족하다고 생각이 되어 꼼수를 부려 완성시켰다. 나중에 공부를 더 하고 바꾸던가 해봐야겠다.