필자는 Expo+React Native+Expo Router 기반으로 앱을 만드는데, 이 셋의 차이점이 무엇인지 어떤 것인지에 대해 자세히 정리하기 위해 글을 적는다.
React Native
- 모바일 앱 개발을 위해 만들어진 React 프레임워크
- DOM 대신 Native UI 컴포넌트를 사용함
- 앱은 JS 코드와 Native 코드가 브리지를 통해 연결됨
Expo
- React Native의 설정 복잡도를 줄여주는 프레임워크로 초기 시작 단계가 매우 간단
- 네이티브 빌드 설정 없이 앱을 실행 및 테스트 가능
- Expo Go 앱을 사용해 실행 가능
expo-camera,expo-location등과 같은 유용한 API 존재
Expo는 React Native의 실행 환경, 도구, 설정을 자동화한 플랫폼이다.
Expo Router
- 파일 기반 라우팅을 제공하는 Expo 전용 라우팅 시스템
app/폴더 안에 있는 파일이 자동으로 route로 매핑- 이때
App.js생성 시 충돌이 발생하여 오류가 나기에 만들면 안됨
app/
├── index.js → "/"
├── camera.js → "/camera"
├── category.js → "/category"다음과 같은 폴더 구조를 지닌다.
즉, Expo Router는 React Native에서 Next.js 스타일 라우팅을 가능하도록 해준다.
관계
| 역할 | 설명 |
|---|---|
| React Native | 모바일 앱 개발의 핵심 프레임워크 |
| Expo | React Native 앱을 쉽게 만들고 실행할 수 있게 도와주는 플랫폼 |
| Expo Router | 앱 내부 페이지 전환 및 구조를 간편하게 만들어주는 라우팅 시스템 |
마무리
처음엔 React Native, Expo, Expo Router 세 가지가 각각 어떤 역할인지 헷갈리기 쉬웠지만, 지금은 포함 관계로 이해하면 명확하다.
- Expo Router는 Expo 위에서 작동하고,
- Expo는 React Native 위에서 작동한다.
즉, React Native ⊃ Expo ⊃ Expo Router
이러한 구조 덕분에 복잡한 설정 없이도 앱을 빠르게 만들고, 일관된 방식으로 페이지를 구성할 수 있다. 이 3가지 조합은 빠른 개발, 간편한 구조, 실시간 테스트까지 모두 갖춘 효율적인 앱 개발 환경이다.
공부 기록 공간 '◡'