React · 12 Effect의 의존성과 정리
단계: 공유 상태와 외부 시스템 · 편집 가능한 예제 · 저장 ID: react-step-12
목표와 학습 후 역량
- 활성 연결 수가 표시 중 1·제거 후 0이다.
- A→B 전환 로그에서 해제가 새 연결보다 앞선다.
선수 지식
12단위는 11단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
동기화
Effect는 렌더 결과를 외부 시스템과 맞춥니다. 계산 가능한 파생 값에는 Effect가 필요하지 않습니다.
정리 순서
의존성이 바뀌면 이전 설정의 cleanup 후 새 설정을 시작합니다. 개발 StrictMode의 추가 실행은 정리 누락을 드러내는 검사입니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/Connection.jsx에 channel prop을 받아 연결·해제 로그를 내는 Effect를 만드세요.
- 의존성 배열에 channel을 넣고 A→B→A로 바꾸세요.
- 조건부 렌더로 컴포넌트를 제거해 마지막 연결도 해제되는지 세세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| channel | A 유지 | B로 변경 | A 해제 뒤 B 연결 로그가 나온다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 활성 연결 수가 표시 중 1·제거 후 0이다.
- A→B 전환 로그에서 해제가 새 연결보다 앞선다.
자가 점검
- 의존성 경고를 억제하면 어떤 오래된 값이 남나요?
- StrictMode에서 시작 로그가 두 번이면 누수라고 단정할 수 있나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: ref와 DOM 포커스 · 다음: 요청 경합과 취소