Expo Router 사용하기

오랜만에 Expo 로 React native앱을 만드니 이런 엄청난게 개발되어 있었다. 간단하게 살펴보자

기본 구조

• index는 아무것도 없는 상태
• 다른걸 작성하는 그 상태가 되고
• []로 감싸면 Dynamic path로 사용 가능하다.
  • [...rest] 로 감싸면 두개 이상의 path를 가져올수 있다.
    

Dynamic path

// app/blog/[slug].tsx 일때,

import { useLocalSearchParams } from 'expo-router';

...

const { slug } = useLocalSearchParams();

return <Text>Blog post: {slug}</Text>;

Non-Route file

_layout.tsx

• 해당 디렉토리 ( 라우팅 ) 의 레이아웃을 작성한다.
• Ex. 바텀 탭 네비게이션

---

화면간 이동하기

Link : html의 a와 같은 컴포넌트

• 클릭 시 해당 위치로 이동한다.
• 내부에 Pressable같은 Children을 둘수도 있다.
  • 없으면 기본적으로 Text로 감싸진다!

<Link href="/user/bacon">View user</Link>

• params를 통해 dynamic route를 사용할수 있다.

        <Link
        href={{
          pathname: '/user/[id]',
          params: { id: 'bacon' }
        }}>
          View user
        </Link>

• push를 명시적으로 적어 네비게이션 스택에 push되게 할수 있다.
• replace를 명시적으로 적어 스택에 올리는 대신 아예 화면을 전환할수도 있다.

암시적 네비게이션

• 로그아웃 서비스에 네비게이션 이동을 추가한 예시

import { router } from 'expo-router';

export function logout() {
  router.replace('/login');
}

---

Layout 사용하기

• _layout.tsx 라고 이름 붙힌다.
• 레이아웃 안에 들어갈 내용은 Slot으로 주어진다.

import { Slot } from 'expo-router';

export default function HomeLayout() {
  return <Slot />;
}

()

• 기능 등으로 파일을 폴더로 묶고 싶으나 라우팅에 영항을 미치게 하고 싶지 않을때 사용한다.
• 또한 () 폴더 안에 각각의 layout을 두어 동일한 root path에 다른 layout이 적용되게 할수 있다.
  

---

에러 핸들링

+not-found.tsx

• 아무것도 매칭되지 않을때 렌더링된다.

Error Boundary

import { View, Text } from 'react-native';
import { type ErrorBoundaryProps } from 'expo-router';

export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
  return (
    <View style={{ flex: 1, backgroundColor: "red" }}>
      <Text>{error.message}</Text>
      <Text onPress={retry}>Try Again?</Text>
    </View>
  );
}

export default function Page() { ... }

• 컴포넌트 단 에러 바운더리 지정 가능