[AIBE3/5팀/이연서] TODO APP 만들기 완료

[weare0gimbab]

리액트 투두 앱 만들기 미션 레포

🎯 프로젝트 개요

이 과제는 React와 Vite를 사용해 간단한 Todo List를 구현하는 프로젝트입니다.

컴포넌트 구조와 상태 관리를 이해하고, localStorage를 활용한 데이터 유지 기능을 구현합니다.

할 일을 입력하면 목록에 추가되고, 삭제할 수 있으며, localStorage에 저장되어 새로고침해도 유지됩니다.

기능	설명
할 일 추가	텍스트 입력 후 버튼 클릭 시 리스트에 항목 추가
할 일 삭제	항목의 삭제 버튼 클릭 시 해당 항목 제거
완료 체크	체크박스를 클릭하면 완료 여부 표시 (스타일 변화 포함)
localStorage 저장	추가/삭제/체크 시 변경된 todo 상태를 localStorage에 저장
초기 로드	앱 실행 시 localStorage에서 데이터를 불러와 렌더링

💾 localStorage 연동 방식

useEffect()를 사용해 앱 최초 로딩 시 localStorage에서 todos 불러오기 localStorage TodoContext안에서 통합

✅ 중간에 막혔던점

id값이 중복돼서 id를 Date함수 써서 받았는데 코드가 읽기 어려워짐 - useRef사용해서 해결

➕기능 확장 계획

간단한 구현만돼있는 상태인데 우선순위,마감날짜 기능 도 추가할 예정입니다

⚛️ 주요 컴포넌트 구조 예시

src/
├─ components/
│  ├─ TodoItem.jsx
│  └─ TodoList.jsx
├─ App.jsx
├─ main.jsx
├─ hooks/
│  └─ useTodos.js      ← 상태 및 로직 커스텀 훅
└─ utils/
   └─ storage.js       ← getStorage, setStorage

🧠 스크린샷

[Park-seungg]

X 버튼에 Tailwind CSS로 박스 스타일을 추가해 시각적으로 구분하면 더 좋을 것 같습니다. 👍

[gregoryc103]

파일 구조가 components, context, hooks, utils로 분리되어 있어 추후 추가 기능 개발 시에도 큰 구조 변경 없이 기능만 확장할 수 있어 확장성이 좋아보입니다. App.jsx에서 모든 컴포넌트를 중앙에서 호출하고 있어 관리 포인트도 명확해 보입니다.

[ehgk4245]

저는 setTodos([...todos, newTodo])처럼 기존 상태를 직접 참조해서 업데이트했었는데,
이 방식은 setTodos가 비동기적으로 처리되기 때문에 빠른 연속 호출 시 마지막 값으로 덮어쓸 위험이 있다는 걸 알게 되었습니다.
반면, 연서님 코드처럼 setTodos(prev => [newTodo, ...prev])와 같이 함수형 업데이트를 사용하면,
React가 최신 상태(prev)를 내부적으로 보장해서 더 안전하게 상태를 업데이트할 수 있다는 걸 배웠습니다.
좋은 방식 배워갑니다 😊

다만, TodoWriteForm에서 todoText 상태로 입력 값을 관리하면서도,
폼 제출 시에는 e.target으로 직접 DOM에 접근해서 값을 가져오시는 부분이 살짝 의문이 들었습니다!
혹시 이렇게 구현하신 특별한 이유가 있으실까요??

[jookyworld]

저도 id값이 중복되는 같은 문제를 겪었었는데요!!
useRef를 사용하여 0으로 초기화 하면
앱 실행중 localstorage 저장 -> 앱 재실행 -> id 다시 0부터 지정 -> localstorage와 충돌
의 가능성이 있지 않나 하는 궁금증이 듭니다!

기타 컴포넌트 구조부터 UI까지 너무 잘 짜여있습니다🥳