모던 리액트 디자인 패턴 (ebook)

정진호

AI 기반 최적화 솔루션을 제공하는 Tilda에서 프런트엔드 개발자로 근무하며 리액트와 타입스크립트 기반 웹 애플리케이션을 개발해왔다. 컴포넌트 설계와 상태 관리, UI 아키텍처를 중심으로 유지보수 가능한 프런트엔드 구조를 고민하고 있으며, 작은 오픈소스 프로젝트를 유지보수하고 기술을 글로 정리해 공유하는 활동을 이어가고 있다.

• ▣ 01장: 상태 관리 패턴
• 1.1 제어 컴포넌트
• __1.1.1 파이버 아키텍처
• __1.1.2 재조정
• __1.1.3 단일 진실 공급원(Single Source of Truth)
• __1.1.4 왜 비제어 컴포넌트를 선택하는가
• __1.1.5 파이버 노드의 프로퍼티
• 1.2 Flux
• __1.2.1 Flux 패턴이란 무엇인가
• __1.2.2 전역 상태 관리 라이브러리에서의 Flux
• 1.3 상태 리듀서
• __1.3.1 리듀서 함수 확장 문제
• __1.3.2 제어 역전과 상태 리듀서 패턴
• __1.3.3 리액트 컴파일러와 구조적 설계의 지속성
• 1.4 useSyncExternalStore 훅과 디자인 패턴
• __1.4.1 스토어와 옵저버 패턴
• __1.4.2 리액트에서의 객체지향과 디자인 패턴
• __1.4.3 리듀서 스토어
• __1.4.4 useSyncExternalStore로 만드는 지역 상태
• __1.4.5 데코레이터를 활용한 this 바인딩
• 1.5 컨텍스트 API와 의존성 주입
• __1.5.1 의존성 주입
• __1.5.2 전략 패턴
• __1.5.3 컨텍스트 API와 프로퍼티
•  
• ▣ 02장: 컴포넌트 구조 설계 패턴
• 2.1 컴포넌트 컴포지션
• __2.1.1 컴포지션이란 무엇인가
• __2.1.2 어디까지 쪼갤 것인가
• __2.1.3 책임 단위 구분
• 2.2 렌더 프롭스
• __2.2.1 Function as Children
• __2.2.2 서버 컴포넌트에서의 렌더 프롭스 패턴
• 2.3 고차 컴포넌트
• __2.3.1 고차 컴포넌트와 렌더링 제어
• __2.3.2 고차 컴포넌트와 프로퍼티 조작
• __2.3.3 고차 컴포넌트와 렌더 프롭스 패턴
• __2.3.4 서버 컴포넌트에서의 고차 컴포넌트
• 2.4 동적 프로퍼티
• __2.4.1 1급 객체
• __2.4.2 정적 메서드 패턴
• __2.4.3 동적 프로퍼티 패턴
• __2.4.4 RSC 환경에서의 한계와 대응
• 2.5 컴파운드 컴포넌트
• __2.5.1 컨텍스트 API를 활용한 컴파운드 패턴
• __2.5.2 왜 컨텍스트 API는 안티패턴인가
• __2.5.3 상태 공유 패턴 비교
• __2.5.4 Middle-Out
• 2.6 설정 컴포넌트
• __2.6.1 빌더 패턴
• __2.6.2 설정 컴포넌트 구현
•  
• ▣ 03장: UI 렌더링 및 표현 패턴
• 3.1 선언적 렌더링
• __3.1.1 커맨드 패턴
• __3.1.2 다양한 선언적 컴포넌트
• __3.1.3 선언적 렌더링 패턴과 설정 컴포넌트 패턴
• 3.2 렌더 위임
• __3.2.1 cloneElement를 사용한 엘리먼트 복제
• __3.2.2 슬롯 패턴
• __3.2.3 슬로터블 패턴
• 3.3 다형성 컴포넌트
• __3.3.1 다형성이란 무엇인가
• __3.3.2 정적 다형성 컴포넌트
• __3.3.3 동적 다형성 컴포넌트
• 3.4 명령형 렌더링
• __3.4.1 싱글턴 패턴
• __3.4.2 전역 컨테이너와 싱글턴 스토어
• 3.5 컴포넌트 접근 제어
• __3.5.1 캡슐화와 인터페이스 분리 원칙
• __3.5.2 useImperativeHandle을 통한 접근 제어
• 3.6 재귀 컴포넌트
• __3.6.1 재귀란 무엇인가
• __3.6.2 복합체 패턴과 재귀 컴포넌트
• 3.7 유한 상태 컴포넌트
• __3.7.1 유한 상태 머신
• __3.7.2 XState로 구현하는 리액트 유한 상태 머신
•  
• ▣ 04장: 로직 설계 패턴
• 4.1 프롭스 게터
• __4.1.1 클래스 컴포넌트와 프롭스 게터 패턴
• __4.1.2 커스텀 훅과 프롭스 게터
• 4.2 책임 연쇄 패턴
• __4.2.1 책임 연쇄 패턴의 구조
• __4.2.2 칠판 패턴
• __4.2.3 핸들러 체인의 구조 유형
• 4.3 객체 참조 공유
• __4.3.1 메모리 관점에서의 객체 참조 공유
• __4.3.2 정보 은닉과 공유 컨텍스트
• 4.4 지연 실행 설계
• __4.4.1 thenable과 실행 시점 분리
• __4.4.2 await의 실행 모델과 동화 과정
• __4.4.3 AbortController와 비동기 작업 강제 종료
• __4.4.4 비동기 UI 응답
• 4.5 데코레이터
• __4.5.1 자바스크립트 데코레이터 문법
• __4.5.2 스탠다드 데코레이터
• __4.5.3 레거시 데코레이터
• __4.5.4 데코레이터 팩토리 패턴
• __4.5.5 데코레이터의 적용 시점
• __4.5.6 데코레이터 합성
• __4.5.7 스탠다드 데코레이터를 활용한 응답 검증 설계
•  
• ▣ 05장: 타입스크립트 패턴
• 5.1 함수로서의 type 키워드
• __5.1.1 문제 정의
• __5.1.2 infer extends
• __5.1.3 룩업 테이블 타입
• __5.1.4 재귀 타입
• __5.1.5 제네릭 저장 공간
• __5.1.6 선제적 추론
• __5.1.7 타입 테스트
• 5.2 유니온 타입에서의 분산 추론
• __5.2.1 분산 추론에서의 타입 컨텍스트
• __5.2.2 객체 유니온에서의 분산 추론 활용
• __5.2.3 분산되지 않는 유니온
• 5.3 타입 정규화
• __5.3.1 느슨한 자동 완성
• __5.3.2 Roll 타입
• 5.4 인터페이스 확장
• __5.4.1 모듈 보강
• __5.4.2 타입 등록 패턴
• __5.4.3 플러그인 매니저와 타입 등록
• 5.5 구분된 유니온 타입
• __5.5.1 팩토리 메서드 패턴
• __5.5.2 팩토리 컴포넌트
•  
• ▣ 06장: 비동기 UI 패턴
• 6.1 ErrorBoundary
• __6.1.1 선언적 에러 처리의 철학
• __6.1.2 Promise reject와 ErrorBoundary의 연결
• __6.1.3 ErrorBoundary 구현
• __6.1.4 재시도 가능한 ErrorBoundary
• __6.1.5 ErrorBoundary를 바라보는 기준
• 6.2 Suspense
• __6.2.1 리액트 내부: throw된 값의 운명
• __6.2.2 Suspense 기반 데이터 페칭 구현
• 6.3 비동기 경계 설계와 최적화
• __6.3.1 경계 설계: Suspense와 ErrorBoundary의 배치 전략
• __6.3.2 실무 안티패턴과 해결책
• __6.3.3 Waterfall 문제와 병렬 로딩
• __6.3.4 에러 복구와 모니터링
• __6.3.5 캐시 무효화와 재검증
• __6.3.6 마무리: 선언적 비동기의 패러다임
• 6.4 동시성 UI 패턴
• __6.4.1 동시성 렌더링의 철학
• __6.4.2 useTransition: 상태 변경의 우선순위 제어
• __6.4.3 useDeferredValue: 값의 지연 업데이트
• __6.4.4 useTransition vs useDeferredValue: 언제 무엇을 사용할까
• __6.4.5 실무 패턴: 복잡한 검색 UI
• __6.4.6 내부 동작: Lanes와 Time Slicing
• __6.4.7 마무리: 우선순위로 설계하는 반응성
• 6.5 Optimistic UI 패턴
• __6.5.1 낙관적 업데이트의 설계 철학
• __6.5.2 TanStack Query의 Optimistic Update
• __6.5.3 복잡한 시나리오: 배열 업데이트
• __6.5.4 다중 쿼리 업데이트와 정규화 문제
• __6.5.5 충돌 해결 전략
• __6.5.6 에러 처리와 사용자 피드백
• __6.5.7 실무 적용 기준
• 6.6 Streaming SSR과 Hydration
• __6.6.1 전통적인 SSR의 한계
• __6.6.2 Streaming SSR의 기본 모델
• __6.6.3 Suspense 호환 리소스 만들기
• __6.6.4 renderToPipeableStream으로 직접 구현하기
• __6.6.5 클라이언트 하이드레이션 연결하기
• __6.6.6 웹 표준 스트림 환경에서는 renderToReadableStream을 사용한다
• __6.6.7 하이드레이션 미스매치를 피하는 법
• __6.6.8 실무 설계 기준
• __6.6.9 성능을 어떻게 검증할 것인가
• __6.6.10 마무리: Suspense 경계는 전송 경계이기도 하다
•  
• ▣ 07장: 설계 및 아키텍처 패턴
• 7.1 리액트 컴파일러
• __7.1.1 리액트 컴파일러 파이프라인
• __7.1.2 구조를 재구성하는 최적화
• __7.1.3 리액트 컴파일러와 훅의 규칙
• 7.2 Feature-Sliced Design과 종속성 설계
• __7.2.1 종속성 그래프와 순환 참조의 문제
• __7.2.2 FSD 계층 구조와 설계 원칙
• __7.2.3 Slice와 Public API 패턴
• __7.2.4 FSD의 본질과 트레이드오프
• 7.3 성능 최적화 아키텍처
• __7.3.1 코드 스플리팅: 필요한 것만 로드하기
• __7.3.2 컴포넌트 단위 코드 스플리팅
• __7.3.3 번들 분석과 최적화
• __7.3.4 HTTP/2 및 리소스 힌트 최적화
• __7.3.5 가상화(Virtualization): 대규모 리스트 렌더링
• __7.3.6 이미지 최적화와 Lazy Loading
• __7.3.7 메모리 관리와 메모리 누수 방지
• __7.3.8 서드파티 스크립트 최적화
• __7.3.9 성능 모니터링과 지속적 개선

• GitHub 저장소: https://github.com/wikibook/react-design-patterns
• ZIP 형식으로 다운로드: https://github.com/wikibook/react-design-patterns/archive/refs/heads/main.zip