React · 15 커스텀 Hook의 경계
단계: 필기 보존과 렌더 측정 · 편집 가능한 예제 · 저장 ID: react-step-15
목표와 학습 후 역량
- 두 패널에 같은 크기가 표시된다.
- 마지막 패널 제거 후 구독 수가 0이다.
선수 지식
15단위는 14단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
로직 재사용
커스텀 Hook은 상태 있는 로직을 묶습니다. Hook을 두 번 호출하면 기본적으로 서로 다른 상태와 Effect가 생깁니다.
호출 규칙
Hook은 컴포넌트나 Hook의 최상위에서 호출합니다. 조건은 Hook 내부 로직에서 처리해 호출 순서를 유지합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/useWindowSize.js로 resize 구독과 cleanup을 추출하세요.
- 크기를 표시하는 패널 두 개에서 Hook을 호출하세요.
- 한 패널을 제거하고 남은 패널의 갱신과 구독 수를 확인하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| Hook 소비자 | 1개 | 2개 | 독립 호출마다 구독이 생기므로 제거 시 하나씩 정리된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 두 패널에 같은 크기가 표시된다.
- 마지막 패널 제거 후 구독 수가 0이다.
자가 점검
- 로직을 공유하는 것과 상태를 공유하는 것은 어떻게 다른가요?
- 조건부 Hook 호출 대신 어떤 구조를 쓰나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: Effect와 외부 렌더러 · 다음: 필기 저장과 초기 복원