React · 04 객체와 배열 갱신
단계: 컴포넌트와 상태 계산 · 편집 가능한 예제 · 저장 ID: react-step-04
목표와 학습 후 역량
- 원본 배열의 done 값이 변하지 않는다.
- 대상이 아닌 카드의 참조가 유지된다.
선수 지식
4단위는 3단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
불변 갱신
객체를 직접 수정하면 이전 렌더의 스냅샷도 오염됩니다. 변경 경로를 복사해 새 참조를 전달합니다.
부분 변경
map은 대상 id만 새 객체로 바꾸는 데 적합합니다. 변경하지 않은 항목의 참조는 유지할 수 있습니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/model.js에 toggle(items,id)를 작성하세요.
- App.jsx의 setter에 함수형 갱신을 사용해 toggle을 연결하세요.
- 입력 배열을 복사해 보관하고 대상·비대상 객체의 참조와 done을 비교하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 변경 대상 | id 1 | id 2 | 선택한 항목의 객체만 새 참조가 된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 원본 배열의 done 값이 변하지 않는다.
- 대상이 아닌 카드의 참조가 유지된다.
자가 점검
- 얕은 복사만으로 중첩 객체도 안전한가요?
- sort를 원본 배열에 호출하면 어떤 문제가 생기나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 이벤트와 상태 스냅샷 · 다음: 조건부 화면과 빈 상태