Expo Router v56, SSR 지원·React Navigation에서 탈피
출처: Dev.to
Expo Router가 출시 이후 가장 큰 변화를 맞이했습니다. 버전 56은 React Navigation을 포크하고, 스트리밍 서버‑사이드 렌더링을 추가했으며, 안드로이드 개발자들에게 기다리던 툴바 API를 제공합니다.
포크가 여기서 핵심 이야기이며, 모든 Expo Router 앱에 영향을 미칩니다. 하지만 여기서 끝이 아닙니다: 새로운 SSR 기능, iOS와 일치하는 안드로이드 툴바, 그리고 확장된 Native Tabs가 추가되었습니다. 어떤 점이 바뀌었고 왜 중요한지 살펴보겠습니다.
Expo는 React Navigation과 깊은 인연을 가지고 있습니다. Brent Vatne(Expo 엔지니어링 부사장)는 @ericvicenti, @satya164와 함께 React Navigation 1.0·2.0 버전을 이끌었습니다. 우리는 React Native의 NavigationExperimental과 자체 ex‑navigation에서 영감을 받은 초기 실험을 성장시켜, React Native 표준 네비게이션 솔루션으로 자리 잡게 도왔습니다.
React Navigation은 Satya의 능숙한 손에 남아 있는 반면, 우리의 초점은 Expo Router로 옮겨갔습니다. Expo Router가 진화하면서 우리는 React Navigation 내부에 대한 더 깊은 제어가 필요했습니다. Satya와 논의한 결과, Expo Router가 의존하고 있는 부분을 포크하는 것이 양 프로젝트 모두에게 더 나은 선택이라는 결론에 이르렀습니다.
이는 React Navigation을 포기한다는 의미가 아니라, 각 프로젝트가 서로 다른 방향으로 성장할 여지를 만든다는 뜻입니다.
왜 포크했는가?
- 파일 기반 라우팅, 웹 기능, 서버 렌더링에 특화된 변경을 자유롭게 적용하기 위해. 이러한 개선은 React Navigation 사용자에게 직접적인 이득이 되지 않으며, upstream에 반영하면 불필요한 복잡성이 늘어납니다.
- React Navigation 내부를 Expo Router 전용으로 최적화함으로써 통합을 단순화하고, 우회 코드를 줄이며, 유지보수를 쉽게 만들 수 있습니다.
- 의존성 버전 관리 측면에서도 실용적인 이점이 있습니다. 일부 프로젝트에서는 서로 다른 React Navigation 버전이 동시에 설치돼 충돌이 발생했는데, 포크를 통해 호환성을 더 잘 제어하고 릴리즈 예측성을 높일 수 있습니다.
- **웹 기능(데이터 로더, SSR)**은 이러한 전용 코드베이스에서 더 쉽게 구현됩니다.
Expo Router가 이제 React Navigation에 의존하지 않으므로 @react-navigation/* 패키지에서 코드를 직접 가져올 수 없습니다. 이는 기존 코드를 깨뜨릴 수 있기에, 우리는 마이그레이션을 돕는 도구를 제공했습니다.
마이그레이션 도구 사용법
# 모든 React Navigation import를 expo-router/react-navigation 으로 변환
npx expo-router-codemod우리의 마이그레이션 가이드는 수동 마이그레이션 단계도 상세히 설명합니다. 전환을 원활하게 하기 위해, 라이브러리에서 @react-navigation/core를 import하면 최소 한 번의 릴리즈 사이클 동안 자동으로 expo-router/react-navigation으로 리다이렉트됩니다.
문제가 발생하면 언제든 알려 주세요.
React Navigation 팀과는 공통 API를 정의하기 위해 협업하고 있습니다. 두 라이브러리를 모두 지원해야 하는 라이브러리를 유지보수하고 있다면, 새로운 API에 맞게 조정하는 작업을 함께 진행하고 싶습니다. 연락 주세요.
Suspense Fallback 커스터마이징
이제 _layout 안에서 라우트별 Suspense fallback을 직접 정의할 수 있습니다. 아래와 같이 SuspenseFallback을 export 하면 로딩 화면을 커스터마이징할 수 있습니다.
import { ActivityIndicator, View } from 'react-native';
import { Stack } from 'expo-router';
export function SuspenseFallback() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
export default function Layout() {
return <Stack />;
}스트리밍 SSR
Expo Router는 이미 API 라우트, 미들웨어, 데이터 로더, 정적 렌더링을 지원했습니다. 버전 56에서는 스트리밍 서버‑사이드 렌더링을 도입해, 느린 데이터‑종속 컴포넌트보다 중요한 UI 요소를 먼저 표시함으로써 인지된 성능을 크게 향상시킵니다.
// expo-router.config.js
export default {
unstable_useServerRendering: true,
};스트리밍 SSR에는 HTML 메타데이터를 생성하는 새로운 generateMetadata 함수도 포함됩니다.
또한 타입‑안전한 데이터 로더를 위한 헬퍼 유틸리티를 추가했습니다.
안드로이드 툴바 지원
SDK 55에서 iOS 툴바 지원을 도입했으며, 버전 56에서는 안드로이드에도 동일한 기능을 추가해 플랫폼 간 일관성을 확보했습니다. iOS와 마찬가지로 안드로이드 툴바를 왼쪽, 오른쪽, 하단 세 위치 중 하나에 배치할 수 있습니다.
툴바 옵션 전체 보기: 툴바 문서
Native Tabs 확장
지난 가을, Router v6(그 이후로 라우터 명명 규칙을 변경함)에서 Native Tabs 지원을 추가했습니다. 현재 우리는 완전한 크로스‑플랫폼 지원을 목표로 하고 있으며, 다음 릴리즈에서 API를 안정화할 계획입니다.
버전 56에서는 Native Tabs에 비활성화 옵션을 도입했습니다. 가장 많이 요청된 기능인 탭 선택 방지를 disabled 속성으로 구현할 수 있어, 탭 바에 표시되지만 사용자는 클릭할 수 없습니다.
전체 옵션 및 플랫폼 지원: Native Tabs 레퍼런스 페이지
이번 릴리즈의 핵심 정리
- React Navigation 포크로 인해 모든 Expo Router 앱에서 한 번의 import 업데이트가 필요합니다. 제공된 codemod와 호환성 레이어 덕분에 마이그레이션이 간단합니다.
- 스트리밍 SSR,
generateMetadata, 새로운 로더 헬퍼가 웹 경험을 크게 개선합니다. - 안드로이드 툴바 지원과 확장된 Native Tabs가 iOS와 기능을 맞추었습니다.
기존 앱은 마이그레이션 가이드를 따라 codemod를 실행하면 되고, 새 프로젝트는 SDK 56부터 이 모든 기능을 기본으로 사용할 수 있습니다.
Discord와 GitHub에서 우리를 찾아 주세요. 여러분이 만든 프로젝트와, 혹시 깨지는 부분이 있다면 언제든 알려 주세요.
이 글은 Expo 블로그의 내용을 기반으로 작성되었습니다. 더 많은 React Native 소식은 @expo를 팔로우하세요.