EXPO) Expo Router로 Navigation 구현하기

한 겨울 폭설이 내렸을 때

안녕하세요! 짭짭이입니다.

File 구조 형식으로 Navigation을 구현하는 Expo Router에 대해 정리하도록 하겠습니다.

npx create-expo-app --template default

 

물론 https://docs.expo.dev/router/installation/ 에서 메뉴얼로 작업 가능하지만 

위 커맨드로 시작하면 이러한 파일 구조를 가지게 됩니다.

여기서 APP 부분에서 작업을 하게 되는데, 그 이유는 package.json의 main에서 부터 시작하기 때문입니다.

 

제가 아직은 자세히 아는 것은 아니지만, Expo Router에서 중요한 것은 

파일 구조와 Layout과 Page 입니다.

파일 구조는 결국 PATH를 의미합니다. 

기존에 Swift에서 특정 View를 넣는 형식이 아니라 Path를 지정하면 해당 Path로 이동하는 방식입니다.

따라서 페이지를 이동할 때, 아래와 같은 형식으로 URL을 주면 이동하는 방식 입니다.

router.push('/(room)');

https://docs.expo.dev/router/navigating-pages/

Navigate between pages

 

Layout은 어떠한 방식으로 구성할 것인지를 물어보는 겁니다.

React Native에서는 STACK , TAB, Drawwer 방식을 제공하는데,

하나의 Layout에는 이 방식중에 하나를 그리고 어떤 파일들을 구성할 건지 적는 곳 입니다.

 <Stack screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}>
    <Stack.Screen name='(auth)' />
    <Stack.Screen name='(main)' />
    <Stack.Screen name='(room)' />
  </Stack>

https://docs.expo.dev/router/layouts/

Layout routes

 

마지막은 PAGE 입니다.

Page는 내가 해당 View로 이동했을때, 사용자에게 보여줄 곳을 그려주는 곳 입니다.

export default function TabFirstPage() {
  const handleNavigation = () => {
    router.push('/(room)');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>TabFirstView</Text>
      <TouchableOpacity style={styles.button} onPress={handleNavigation}>
        <Text style={styles.linkText}>Go to Room</Text>
      </TouchableOpacity>
    </View>
  );
}

https://docs.expo.dev/router/create-pages/

Create pages with Expo Router

 

여기서 기본적인 것의 구조를 알았습니다. 요약하자면

파일구조로 PATH를 만들어 주고

layout으로 해당 PATH의 구조를 생성하고

Page로 화면을 꾸며주는 겁니다.

 

Layout의 Route를 구성할 때 Non-Route/ Dynamic Route 가 있습니다.

위와 같이 Path를 지정하는 방식도 있지만, 

위와 같이 Non-Router라는 이름의 (XXX)을 하면 Path에 첫 시작을 지정하지 않았기 때문에 Index 파일을 만들어줘야합니다.

const pushHomePage = () => {
    router.push({
      pathname: "/(main)/(sub)/home/[home]",
      params: {
        home: "homeValue", // Replace "homeValue" with the actual value you want to pass
      },
    });
  };



export default function MainLayout() {
  return (
    <Stack>
      <Stack.Screen name="index"/>
      <Stack.Screen name="home/[home]"/>
    </Stack>
  );
}

export default function HomeView() {

  const local = useLocalSearchParams<{home: string}>()

  return (
    <View>
      <Text>Home - {local.home}</Text>
    </View>
  );
};

또한 이런식으로 home/[home] 처럼 다양한 정보를 정달할 수 있는 Dynamic Route도 존재합니다.

 

다음에는 TAB과 Stack, Drawwer에 대해 작성하도록 하겠습니다.

감사합니다.