React · 27 통합 편집기와 자원 감사
단계: 성능 검증과 통합 편집기 · 편집 가능한 예제 · 저장 ID: react-step-27
목표와 학습 후 역량
- 10회 전환 뒤 A와 B 초안이 그대로다.
- 최종 숨김 상태에서 활성 렌더 루프가 0이다.
선수 지식
27단위는 26단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
통합 경계
필기·검색·Canvas는 갱신 속도와 수명이 다릅니다. 각 영역의 소유자를 나누면 전환 중 데이터와 자원을 추적하기 쉽습니다.
감사 기록
생성·해제 횟수만 같아도 아직 살아 있는 자원을 놓칠 수 있습니다. 최종 활성 수와 기능 복원을 함께 확인합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/StudyWorkspace.jsx에 목록·필기·ThreeScene을 합치세요.
- 단위 10회 전환 중 입력과 Canvas 숨김을 섞어 실행하세요.
- notes/audit.md에 초안 id·활성 루프·리스너·저장 오류 처리 결과를 기록하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 전환 횟수 | 1회 | 10회 | 초안은 id별로 남고 자원 수는 누적되지 않는다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 10회 전환 뒤 A와 B 초안이 그대로다.
- 최종 숨김 상태에서 활성 렌더 루프가 0이다.
자가 점검
- 전환 시 어떤 상태는 보존하고 어떤 상태는 초기화해야 하나요?
- 생성·해제 로그만으로 GPU 해제를 보장할 수 있나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 회귀 시나리오 만들기 · 다음: 상태 보존과 성능