22 · React+Three.js 컴포넌트 설계
4주 차 / 원문 Day 22 · 문서·예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
UI 상태와 매 프레임 장면 상태를 나누고 실습 계약을 만든다.
선수 지식
React state/ref/effect, 07과 21.
핵심 개념과 설명
선택 실습·입력 값·오류 메시지는 React 상태로 관리하고, 매 프레임 회전·행렬은 Three.js에서 관리할 수 있습니다. 책임을 나누면 UI 갱신이 장면을 불필요하게 다시 만들지 않습니다.
실습 공통 계약은 mount/update/dispose처럼 최소화합니다. 실제 중복이 생긴 코드부터 shared로 옮깁니다. 비동기 응답에는 실행 식별자를 붙여 이전 실습의 응답이 현재 UI를 덮어쓰지 못하게 합니다.
학습 후 얻을 역량
- UI 상태와 매 프레임 장면 상태를 나누고 실습 계약을 만든다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- 현재 앱의 메뉴·저장·미리보기 코드를 읽고 상태 소유자 표를 만듭니다.
- mesh와 GS를 연결할 최소 인터페이스를 정의합니다.
- A의 느린 응답 중 B로 전환하는 시나리오를 작성하고 오래된 응답을 무시합니다.
관찰할 변수
선택 단위, 실행 id, 응답 순서, UI 입력.
완료 조건
- 상태 소유자와 수명 경계를 설명했다.
- 실습 계약을 문서화했다.
- 늦은 응답을 처리하는 방법을 검증했다.
자가 점검 질문
- 모든 프레임 값을 React state로 올려야 하나요?
- 아직 중복되지 않은 코드를 미리 추상화하면 무엇이 어려워지나요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: GS 뷰어 복습과 후보 비교 · 다음: 로딩 UI와 진행률
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 22-react-viewer
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.