React Escape Hatches 심화 — Refs · Effects · Custom Hooks

TypeScript/JavaScript와 React UI 컴포넌트 개발에 능숙한 중급 개발자. 직전 'Managing State' 코스(useState, lifting, key, useReducer, context, reducer+context)를 마쳤지만 Refs · Effects · Custom Hooks 영역에서 멘탈모델과 의사결정 깊이가 부족함. · ko · 총 31개 class · 45개 학습 목표 · 179.1분

오리엔테이션 — Escape Hatch 멘탈모델

🎬 왜 'Escape Hatch'인가 — React의 기본 흐름과 마지막 수단6장 · 4.7분 · LO LO-S0.1, LO-S0.3
🎬 결정 트리 — 지금 이 코드, Escape Hatch가 정말 필요한가?8장 · 5.1분 · LO LO-S0.2
📝 섹션 퀴즈 (6문항)

Ref로 값 참조하기 — 재렌더 없이 기억하기

🎬 useRef 기본과 state와의 차이8장 · 4.4분 · LO LO-S1.1, LO-S1.2
🎬 Ref의 좋은 사용 사례 — timeout, 디바운싱, 최신 값7장 · 4.6분 · LO LO-S1.3
🎬 Ref 안티패턴과 전역 변수 → ref 리팩터링8장 · 5.2분 · LO LO-S1.4, LO-S1.5
📝 섹션 퀴즈 (8문항)

Ref로 DOM 조작하기 — focus, scroll, 그리고 통제된 노출

🎬 ref={...}로 DOM 만지기 — focus·scroll·measure·play7장 · 4.1분 · LO LO-S2.1, LO-S2.2
🎬 flushSync로 타이밍 맞추기 + React가 관리하는 DOM은 손대지 않기7장 · 4.3분 · LO LO-S2.3, LO-S2.4
🎬 자식에게 ref 넘기기 — forwardRef → React 19 ref prop, 그리고 useImperativeHandle7장 · 4.3분 · LO LO-S2.5
📝 섹션 퀴즈 (7문항)

Effect로 동기화하기 — 라이프사이클이 아닌 동기화 모델

🎬 Effect는 라이프사이클이 아니라 동기화다7장 · 5.5분 · LO LO-S3.1
🎬 useEffect 시그니처, 의존성 배열, cleanup 패턴9장 · 7.7분 · LO LO-S3.2, LO-S3.3
🎬 Strict Mode 더블 호출의 의도와 ref-회피 안티패턴8장 · 7.2분 · LO LO-S3.4
📝 섹션 퀴즈 (7문항)

Effect 안 써도 되는 경우 — 12가지 안티패턴 진단

🎬 Effect 안 써도 되는 경우 — 진단 프레임과 결정 트리7장 · 4.4분 · LO LO-S4.1
🎬 Derived state — render 중 계산과 useMemo8장 · 4.2분 · LO LO-S4.2
🎬 State 리셋과 조정 — key prop과 state-during-render7장 · 4.3분 · LO LO-S4.3
🎬 인터랙션 vs 표시 — 핸들러로 옮겨야 할 6가지9장 · 5.2분 · LO LO-S4.4
🎬 외부 통합과 종합 결정 트리 — useSyncExternalStore · fetch race8장 · 5.2분 · LO LO-S4.5, LO-S4.6
📝 섹션 퀴즈 (9문항)

반응형 Effect의 라이프사이클

🎬 컴포넌트 라이프사이클 vs Effect 라이프사이클 — 매 렌더가 자기 closure7장 · 4.1분 · LO LO-S5.1
🎬 Reactive vs Non-reactive 값 — Object.is로 판정되는 재실행 흐름9장 · 5.6분 · LO LO-S5.2, LO-S5.3
🎬 exhaustive-deps 해결 3가지 옵션과 Effect 분리 원칙8장 · 5.1분 · LO LO-S5.4, LO-S5.5
📝 섹션 퀴즈 (7문항)

Event와 Effect 분리하기 — useEffectEvent

🎬 Event냐 Effect냐 — '왜 실행돼야 하나?'로 가르기7장 · 4.0분 · LO LO-S6.1
🎬 useEffectEvent로 non-reactive 추출 — theme/roomId 패턴8장 · 5.1분 · LO LO-S6.2, LO-S6.4
🎬 Effect Event의 제약과 안티패턴 — 외부에 노출 금지7장 · 5.4분 · LO LO-S6.3
📝 섹션 퀴즈 (7문항)

Effect 의존성 줄이기 — 6가지 전략

🎬 deps는 코드의 거울 — linter suppress 절대 금지 원칙7장 · 3.9분 · LO LO-S7.1, LO-S7.2
🎬 전략 1-3 — 정적값 외부화 · 객체/함수 안에서 생성 · updater8장 · 4.4분 · LO LO-S7.2, LO-S7.3
🎬 전략 4-6 — useEffectEvent · Effect 분리 · 객체 prop 분해9장 · 4.7분 · LO LO-S7.2, LO-S7.4
🎬 실전 케이스 스터디 — 6 전략 조합 선택과 트레이드오프 평가8장 · 4.8분 · LO LO-S7.5
📝 섹션 퀴즈 (8문항)

Custom Hook으로 로직 재사용하기

🎬 Custom Hook의 규칙 — use 접두사와 '로직만 공유' 원칙8장 · 5.7분 · LO LO-S8.1
🎬 실전 추출 — useFormInput, useChatRoom과 useEffectEvent wrap8장 · 6.6분 · LO LO-S8.2, LO-S8.3
🎬 추출할 것인가 말 것인가 — composition과 미래 대비7장 · 7.5분 · LO LO-S8.4, LO-S8.5
📝 섹션 퀴즈 (7문항)

종합 — 안티패턴 진단과 통합 케이스 스터디

🎬 안티패턴 진단 클리닉 — 코드 6개, 어디가 잘못됐나7장 · 13.9분 · LO LO-S9.1
🎬 통합 케이스 스터디 — 검색 채팅방을 처음부터 끝까지8장 · 17.3분 · LO LO-S9.2, LO-S9.3
📝 섹션 퀴즈 (6문항)