개요

Stack으로 페이지 관리
처음 expo를 접했을 때 이런 포스트를 작성한 적이 있는데,
이번에 새로운 프로젝트를 시작하면서 좀 더 단순히 라우팅 할 수 있는 expo-router 방식에 대해 접하게 되었다.

expo-router?

React Navigation을 더 쉽게 사용하게 해주는 라우팅 라이브러리

앞서 언급한 기존 라우팅 방식인 Stack은 설정할 내용이 많아 관리하기 번거로운 느낌이 있는데,
해당 방식은 폴더 방식으로 라우팅 되어 관리가 쉬워진다.
이 방식은 next.js의 디렉토리 기반 라우팅과 유사한 방식이다.

최근, netx.js로 실습하면서 폴더 라우팅 방식이 굉장히 혁신적이라 생각했는데
(초짜니까 이해해주길)
expo에서도 유사한 방식이 있었다니...

expo-router 파해쳐보기

1) expo-router 시작

먼저, expo 프로젝트를 생성해주자.

npx create-expo-app 프로젝트명

으로 프로젝트를 생성하면 다음과 같은 폴더 구조를 확인할 수 있다.

my-app/
├── app/                      # Next.js 스타일의 라우팅 폴더
│   ├── index.tsx             # Home 스크린
│   └── _layout.tsx           # 전체 공통 레이아웃 (Navigator)
│   └── _(tabs)/             
├── assets/                   # 이미지, 폰트 등 정적 리소스
├── components/               # 재사용 UI 컴포넌트
├── constants/                # 색상, 폰트 등 상수 관리
├── app.config.ts             # 앱 설정 (기존 app.json 대체 가능)
├── package.json
├── tsconfig.json             # TypeScript 세팅
├── babel.config.js
└── etc...

이 구조의 핵심은 (tabs) 폴더이다.
(tabs) 폴더 내부에 폴더 혹은 파일 하나를 생성하면, 그것이 바로 하나의 라우터가 되는 것이다.

2) Tab 구성

기존 방식에선 Bottom-navigation에 Stack 페이지를 넣어 구성하는 식으로 하단바 및 하위 페이지를 구성했다.
그럼 expo-router 방식에서는 어떻게 대응되느냐?
간단하다.
(tabs) 폴더 하위에 보면 _layout.tsx 파일이 존재한다.
아마 expo 자체에서 예시 탭을 만들어 두었기 때문에 쉽게 파악할 수 있겠지만, 여기서 바로 탭 관리를 할 수 있다.

import { Tabs } from "expo-router";
import React from "react";
import { Platform } from "react-native";

import { HapticTab } from "@/components/HapticTab";
import { IconSymbol } from "@/components/ui/IconSymbol";
import TabBarBackground from "@/components/ui/TabBarBackground";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: "absolute",
          },
          default: {},
        }),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "home",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="paperplane.fill" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

파일을 열어보면 다음과 같은 코드를 볼 수 있다.
이 코드의 경우 기존 Bottom-navigation과 유사한 형식이기 때문에 큰 어려움은 없을 것이다.

Tabs.Screen의 props 중 name에 앞서 (tabs)폴더에 생성한 파일명이나 폴더명을 넣으면 하나의 탭을 생성할 수 있다.

options의 경우 기존의 방식과 같이 탭에 대한 디자인을 관리할 수 있는 props이다.

이와 같이 간단하게 expo-router 방식에 대해 알아보았다.
next.js에 익숙한 사람이라면 기존 방식에 비해 편리한 방향이라 이 방법을 사용보는 것도 좋을 듯 하다!