React 상태 관리 심화 — Managing State (react.dev/learn/managing-state 기반)

TypeScript / JavaScript / React UI 컴포넌트 개발은 능숙한 중급 개발자. 함수형 컴포넌트, useState 기본 사용, 이벤트 핸들링, props 흐름은 이미 안다. 다만 state 설계·구조화·공유·보존·리듀서·컨텍스트 영역에서 깊이가 부족하다. · ko · 총 26개 class · 35개 학습 목표 · 196.0분 · v1.0.0

오리엔테이션 — 왜 state 설계가 따로 필요한가

• 🎬 왜 state 설계가 따로 필요한가 — 4가지 통증 진단7장 · 7.6분 · LO LO-S0.1, LO-S0.3
• 🎬 코스 맵 — 7개 챕터가 어떤 통증을 푸는가7장 · 6.6분 · LO LO-S0.1, LO-S0.2
• 📝 섹션 퀴즈 (6문항)

사고방식 전환 — 선언형 UI와 visual states로 반응하기

• 🎬 visual states 열거하기 — 디자이너처럼 UI를 펼쳐보기8장 · 4.9분 · LO LO-S1.1
• 🎬 useState로 모델링하고 비핵심 state 제거하기 — boolean paradox에서 status enum으로9장 · 5.1분 · LO LO-S1.2, LO-S1.4
• 🎬 핸들러 연결과 5단계 프로세스 마무리 — 처음부터 컴포넌트 설계하기9장 · 5.2분 · LO LO-S1.3
• 📝 섹션 퀴즈 (9문항)

state 구조 설계 — 5가지 원칙으로 동기화 버그 차단

• 🎬 5원칙 한눈에 + 관련 state 묶기·모순 회피8장 · 6.4분 · LO LO-S2.1, LO-S2.2
• 🎬 redundant state 제거와 props mirroring 안티패턴8장 · 6.5분 · LO LO-S2.4
• 🎬 duplication 회피 — 객체 대신 id를 저장하라8장 · 6.4분 · LO LO-S2.3
• 🎬 deep nesting 평탄화 — 트리 데이터를 정규화하기8장 · 6.4분 · LO LO-S2.5
• 📝 섹션 퀴즈 (8문항)

컴포넌트 간 state 공유 — Lifting State Up

• 🎬 Lifting State Up — 형제 컴포넌트를 협조시키는 3단계8장 · 7.1분 · LO LO-S3.1
• 🎬 Controlled vs Uncontrolled와 Single Source of Truth8장 · 6.9분 · LO LO-S3.2, LO-S3.3
• 🎬 케이스 스터디 — Accordion·Synced Inputs·Filterable List8장 · 6.5분 · LO LO-S3.4
• 📝 섹션 퀴즈 (7문항)

state 보존과 리셋 — 트리 위치와 key prop

• 🎬 state는 트리 위치에 묶인다 — 보존과 리셋의 기본 규칙8장 · 9.0분 · LO LO-S4.1, LO-S4.2
• 🎬 의도된 리셋 — 다른 위치 vs key prop 두 전략8장 · 9.9분 · LO LO-S4.3
• 🎬 함정 — JSX 위치 ≠ 트리 위치 & 컴포넌트 정의 중첩 금지8장 · 10.3분 · LO LO-S4.4, LO-S4.2
• 📝 섹션 퀴즈 (7문항)

Reducer로 state 로직 추출하기

• 🎬 왜 Reducer인가 — useReducer 시그니처와 도입 동기7장 · 7.1분 · LO LO-S5.1
• 🎬 3단계 마이그레이션 — useState에서 useReducer로8장 · 10.4분 · LO LO-S5.2
• 🎬 Action 컨벤션과 Reducer 순수성 — 결함 진단9장 · 9.2분 · LO LO-S5.3
• 🎬 useState vs useReducer 트레이드오프와 Immer 옵션8장 · 6.3분 · LO LO-S5.4, LO-S5.5
• 📝 섹션 퀴즈 (8문항)

Context로 깊이 데이터 전달하기

• 🎬 prop drilling 문제와 createContext / Provider / useContext 3단계8장 · 9.9분 · LO LO-S6.1, LO-S6.2
• 🎬 같은 컴포넌트가 consume + provide — 자동 level 증가 패턴8장 · 9.0분 · LO LO-S6.3
• 🎬 context를 쓸 때와 쓰지 말 때 — props·composition과 비교8장 · 8.9분 · LO LO-S6.4
• 📝 섹션 퀴즈 (8문항)

Reducer + Context로 확장하기

• 🎬 Reducer와 Context를 결합하기 — 두 context 분리 전략8장 · 7.8분 · LO LO-S7.1
• 🎬 TasksProvider + 커스텀 훅으로 응집하고 다중 도메인으로 확장하기8장 · 8.1분 · LO LO-S7.2, LO-S7.3, LO-S7.4
• 📝 섹션 퀴즈 (7문항)

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

• 🎬 안티패턴 진단 클리닉 — 5대 코드 스멜 한 번에 잡기7장 · 9.4분 · LO LO-S8.1
• 🎬 통합 케이스 스터디 — mini Kanban 앱 의사결정 사슬8장 · 11.6분 · LO LO-S8.2
• 📝 섹션 퀴즈 (7문항)