데브허브 | DEVHUB | Your First RSC with React Native (From Start to Deploy)Your First RSC with React Native (From Start to Deploy)
- React Native에서 React Server Components (RSC)를 구축하고 배포하는 방법을 소개하며, Expo SDK 53 이상에서 프로덕션 환경에서 RSC를 사용할 수 있게 되었음을 강조합니다. 🚀
- RSC 사용을 위해
react-server-dom-webpack 패키지 설치, app.json에서 reactServerFunctions 활성화 및 output을 single로 설정하는 등 초기 환경 설정이 필수적입니다. 🛠️
use server 지시어를 파일 상단에 추가하여 서버에서만 실행되는 RSC를 생성할 수 있으며, 이를 통해 API 키와 같은 민감한 정보를 안전하게 처리하고 데이터를 가져올 수 있습니다. 🔒
- React Native 앱에서 RSC를 호출할 때는
Suspense 컴포넌트로 감싸 로딩 상태를 시각적으로 처리하며, Expo CLI가 백그라운드에서 RSC를 번들링하여 실행합니다. ⏳
- TMDB API를 활용한 영화 목록 RSC 예시를 통해, API 키를
.env 파일에 EXPO_PUBLIC_ 접두사 없이 저장하여 서버 전용으로 유지하고 server-only 모듈로 클라이언트 번들에 포함되지 않도록 보장하는 방법을 시연합니다. 🎬
- RSC는
StyleSheet.create와 같은 클라이언트 전용 API나 상호작용 컴포넌트를 직접 사용할 수 없지만, use client 지시어를 사용하여 특정 컴포넌트를 클라이언트 컴포넌트로 지정함으로써 이러한 제한을 극복하고 풍부한 UI를 구현할 수 있습니다. ↔️
- RSC 배포는
expo export 명령으로 dist 폴더를 생성하고, EAS deploy를 통해 Expo 호스팅에 배포하며, 프로덕션 빌드 시에는 rscide.expo.app과 같은 올바른 RSC 엔드포인트 URL을 설정해야 합니다. ☁️