React · 18 컴포넌트 합성과 children
단계: 필기 보존과 렌더 측정 · 편집 가능한 예제 · 저장 ID: react-step-18
목표와 학습 후 역량
- Panel이 items나 notes 구조를 직접 읽지 않는다.
- 두 패널의 제목과 버튼이 각각 올바르게 표시된다.
선수 지식
18단위는 17단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
합성
children은 부모가 전달한 UI를 배치하는 입력입니다. 레이아웃이 카드 데이터 구조를 몰라도 내용을 감쌀 수 있습니다.
책임 제한
여러 boolean으로 모든 화면을 처리하면 조합이 급격히 늘어납니다. 슬롯 역할의 props나 children으로 공통 레이아웃과 내용을 분리합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/Panel.jsx에 제목·도구 영역·children을 배치하세요.
- 목록 패널과 필기 패널에 같은 Panel을 사용하세요.
- 한 패널에만 저장 버튼을 전달하고 다른 패널에 빈 공간이 남는지 확인하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 도구 영역 | 없음 | 저장 버튼 | 내용 영역을 바꾸지 않고 도구만 추가된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- Panel이 items나 notes 구조를 직접 읽지 않는다.
- 두 패널의 제목과 버튼이 각각 올바르게 표시된다.
자가 점검
- children을 함수로 받는 경우는 언제인가요?
- 모든 변형을 boolean props로 넣으면 검증이 왜 어려워지나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 단위별 상태 보존 · 다음: 비동기 상태를 명시하기