실습 검증 시나리오

추가, 토글, 삭제, 새로고침을 같은 데이터 흐름으로 따라간다

Todo 앱 검증은 버튼을 눌러 보는 일이 아니라 상태가 어떤 배열 항목으로 바뀌고, 그 항목이 어떤 key로 렌더링되는지 추적하는 과정이다.

1 실행 화면 열기

입력창, 추가 버튼, 빈 목록 메시지가 같은 컴포넌트에 있는지 본다.

2 새 항목 추가

trim 이후 빈 값은 막고, 새 객체는 고유 id와 completed false로 들어간다.

3 완료 상태 전환

클릭한 id만 completed가 바뀌고 다른 항목은 그대로 남는다.

4 삭제 후 목록 재계산

filter 결과에서 사라진 id가 화면에서도 제거되는지 본다.

5 새로고침 복원

localStorage를 쓴다면 목록이 다시 만들어지고 effect가 과하게 돌지 않는다.

입력 단계

제어 컴포넌트가 입력값을 잡고 있다

newTodo "리액트 복습"

value와 onChange가 끊기면 입력창과 state가 따로 움직인다.

목록 단계

배열 업데이트는 새 객체와 새 배열로 남긴다

todoItems [{ id: 3, text, completed }]

push로 원본을 바꾸지 않고 map, filter, spread로 새 배열을 만든다.

렌더 단계

key는 화면 항목과 데이터 항목을 연결한다

key item.id를 li에 부여

배열 index를 key로 쓰면 삭제와 토글 뒤 UI가 엉뚱한 항목에 붙을 수 있다.