React · 01 상태와 소유권
단계: 컴포넌트와 상태 계산 · 편집 가능한 예제 · 저장 ID: react-01
목표와 학습 후 역량
- 카드 1개 토글 후 합계가 정확히 1 증가한다.
- 필터를 껐다 켜도 원본 카드 3개의 상태가 유지된다.
선수 지식
JavaScript 배열·객체·함수, DOM 이벤트, npm 프로젝트 실행.
핵심 개념과 설명
단일 원본
useState는 화면이 기억할 값을 보관합니다. 목록에서 계산할 완료 수는 render에서 파생해 원본과 어긋나지 않게 합니다.
컴포넌트 경계
props는 부모가 자식에게 전달하는 입력입니다. 두 자식이 같은 값을 쓰면 공통 부모가 소유하고 변경 함수를 전달합니다.
실습 준비
별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다. 기존 react-01 미리보기는 출발점입니다. 본문의 확장 결과물은 별도 프로젝트에서 구현합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 React Vite 프로젝트 src/App.jsx에 id·title·done을 가진 카드 3개를 useState로 만드세요.
- CardList와 Summary를 분리하고 같은 items에서 목록과 완료 수를 계산하세요.
- 완료 토글과 미완료 필터를 연결하고 상태 소유권 그림을 notes/day01.md에 남기세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 완료 항목 | 0개 | 1개 | 합계가 1로 바뀌고 미완료 목록에서는 해당 카드만 사라진다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 카드 1개 토글 후 합계가 정확히 1 증가한다.
- 필터를 껐다 켜도 원본 카드 3개의 상태가 유지된다.
자가 점검
- 완료 수를 별도 state로 저장하면 어떤 불일치가 생기나요?
- 필터와 완료 상태를 각각 누가 소유해야 하나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.