프로그래밍/ReactNative

Expo Router - 파일 기반 라우팅의 의미

turu 2025. 2. 2. 01:53

Expo Router란?

 

React Native에서 지원하는 파일 기반 라우팅을 제공하는 라이브러리를 말한다... 고 한다.

앱 개발자인 나는 “파일 기반 라우팅”이라는 표현이 정확히 무슨 말인지 이해하지 못했는데,

 

폴더 구조를 떠올리면 쉽게 이해할 수 있다.

만약 내가 원하는 문서 파일이 다운로드 폴더에 있는 “설명서” 폴더 안에 있다면,

이 파일을 찾기 위해서 가장 먼저 다운로드 폴더로 이동하고, 그 다음에 “설명서” 폴더로 이동할 것이다.

이렇게 폴더 구조를 따라가는 방식으로 경로를 정의하는 것이 바로 파일 기반 라우팅이라고 한다.

 

이제 다시 Expo Router 로 돌아와서, 다음과 같은 구조의 폴더 구조가 있다고 하자.

app/
  ├── index.tsx           // 메인 화면 ('/')
  ├── profile.tsx         // 프로필 화면 ('/profile')
  ├── settings/
  │     ├── index.tsx     // 설정 메인 ('/settings')
  │     ├── account.tsx   // 계정 설정 ('/settings/account')
  ├── (auth)/             // 인증 관련 페이지
  │     ├── login.tsx     // 로그인 ('/login')

실제로 Expo Router를 사용할 때 이런식으로 사용하게 되는데, 살펴보면 눈에 띄는게 있다.

  1. 어떤 폴더들은 index라는 이름의 스크립트가 있다(index.tsx)
  2. 어떤 폴더는 괄호(auth) 로 묶인 것이 있고, 어떤건 그냥 폴더(settings)로 되어있다.

우선 1번부터 확인하면,

폴더 내의 index 파일은 특별한 의미를 가지고 있다고 한다.

그건 바로 해당 폴더의 기본 페이지(경로)로 인식한다는 것인데, 다음과 같은 구조가 있을 때,

app/
  ├── profile.tsx      // '/profile'
  ├── settings/
  │     ├── index.tsx  // '/settings'
  │     ├── account.tsx // '/settings/account'

app/settings 경로로 접근하면, 실제로는 app/settings/index.tsx 로 접근하는 것과 같은 의미를 가지는데 이것을 바로 기본 페이지로 인식한다는 의미이다.

이 index 파일이 없는 경로 (app/)로 접근하게 되면 정상적으로 접근 할 수 없으며 웹페이지에서 흔히 봤을 404에러(Not Found)를 보게된다. index가 특별한 의미를 가지게 된건 웹 서버에서 index.html을 기본 파일로 지정한 전통에서 온다는 것 같다.

(우리가 브라우저로 https://www.naver.com 접속을 한다고 할때 실제로 https://www.naver.com/index.html페이지를 불러오게 된다)

 

괄호에 대한 의미는,

괄호로 감싸진 폴더는 URL 경로에 포함되지는 않지만, 폴더를 그룹화 하는 역할을 한다.

예를 들어, app/(auth)/login.tsx 파일은 실제로는 app/(auth) 경로 안에 있지만, 접근 할 때는 app/login.tsx로 접근 할 수가 있다.

괄호는 코드를 정리하기 위해 쓰이는 경로라고 이해하면 좋을 것 같다.

반응형