할 일 목록 앱의 useState 상태 모델

입력 작성

draft state가 input value를 소유하고 빈 값 제출을 막는다.

submit 시 안정 id를 가진 todo 객체를 배열 앞이나 뒤에 추가한다.

완료 토글과 삭제는 기존 배열을 직접 바꾸지 않고 새 배열을 만든다.

필터된 목록은 원본 todos에서 계산하고 별도 state로 복제하지 않는다.

add

새 항목 생성 trim 후 빈 값 차단, id 생성, draft 초기화

중복 제출 한계

toggle

완료 상태 전환 id가 맞는 항목만 completed를 반전

map으로 새 배열 생성

delete

항목 제거 filter로 제거 후 key 안정성 유지

index key 위험

filter

보기 조건 원본은 유지하고 화면에 보이는 목록만 계산

URL 저장도 가능

id 항목 key가 index가 아니라 안정 id다.

불변성 todos 배열과 todo 객체를 직접 mutate하지 않는다.

빈 입력 공백만 입력한 항목이 추가되지 않는다.

파생 목록 필터 결과를 원본 state와 따로 저장하지 않는다.