할 일 앱 구성 흐름

Todo 앱은 React 기초 개념을 한 화면에서 결합한다

입력 폼, 배열 상태, key, 조건부 렌더링, useEffect 저장 흐름이 서로 끊기지 않아야 안정적인 Todo 앱이 됩니다.

구현 블록

Map
form state newTodo 값을 value와 onChange로 제어합니다.
list state todoItems 배열은 추가, 토글, 삭제 액션의 원본입니다.
render map과 key로 항목을 그리고, 완료 여부는 조건부 스타일로 표현합니다.
effect localStorage 저장처럼 React 밖 작업은 useEffect로 분리합니다.

검증 순서

QA
추가 빈 문자열은 막고, 새 항목에는 안정적인 id를 부여합니다.
토글 map으로 해당 id만 복사해 completed 값을 바꿉니다.
삭제 filter로 제거해도 남은 항목의 key와 상태가 유지되는지 봅니다.
복원 새로고침 후 localStorage 초기값과 화면이 일치하는지 확인합니다.