피드로 돌아가기
Dev.toFrontend
원문 읽기
Slot-Outlet 구조를 통한 React 컴포넌트 렌더링 위치의 완전한 분리
react-slotx
AI 요약
Context
React의 기본 트리 구조상 하위 컴포넌트가 상위 레이아웃의 특정 영역에 UI를 주입하기 위해 복잡한 Prop Drilling이나 Context API 의존성이 필요함. 특히 SSR 환경에서 head 태그 내에 동적 메타데이터를 삽입하는 과정에서 구조적 제약이 발생함.
Technical Solution
- SlotClient 기반의 Shared Store를 도입하여 컴포넌트 계층과 무관한 콘텐츠 등록 시스템 구축
- Slot 컴포넌트를 통한 콘텐츠 등록과 Outlet 컴포넌트를 통한 렌더링 지점 분리로 선언적 UI 배치 구현
- SlotProvider를 최상위에 배치하여 전역적으로 Slot-Outlet 간의 통신 채널을 확보한 아키텍처 설계
- SSR 전용 SlotSSRClient를 제공하여 서버 요청당 독립적인 클라이언트 생명주기를 관리하는 구조 채택
- renderToString 메서드를 통한 Slot 콘텐츠의 문자열 추출로 서버 사이드 HTML 템플릿 주입 최적화
- priority 및 all 모드 설정을 통해 동일 Slot 이름에 대한 충돌 해결 및 병합 전략 제공
실천 포인트
- 복잡한 레이아웃 셸(Shell) 구조에서 하위 페이지가 헤더/푸터 UI를 제어해야 하는 경우 검토 - SSR 환경에서 페이지별 head 태그 내 script/meta 태그의 동적 주입이 필요한 경우 적용 - Prop Drilling 제거를 위해 단순한 상태 공유보다 렌더링 위치의 분리가 우선인지 확인 - SSR 적용 시 Request Scope별로 SlotSSRClient 인스턴스가 독립적으로 생성되는지 검증