react native routing navigation

EXPO의 경우, EXPO ROUTER를 사용할 수 있다.

create-pages
navigating-pages

Expo Router에서는 앱의 디렉토리 구조를 기반으로 각 파일이 하나의 페이지(route)가 됩니다. 예를 들어,
app/index.js → 홈 페이지
app/about.js → About 페이지
와 같이 파일을 구성하면, 이 파일들이 각각의 라우트가 되어 앱 내에서 자동으로 매핑됩니다.
export default를 반드시 적어주어야한다.

// root/app/example.tsx
import { View, Text } from "react-native";

const Example = () => {
  return (
    <View>
      <Text>Example</Text>
    </View>
  );
};
export default Example;

• push: 기본적으로 페이지 이동은 스택에 새로운 페이지를 추가하지만, push 프롭을 사용하면 항상 새로운 화면을 푸시할 수 있습니다.

  <Link push href="/feed">
    Login
  </Link>

• replace: 현재 페이지를 새로운 페이지로 대체하여, 네비게이션 스택에서 현재 페이지를 제거합니다.

  <Link replace href="/feed">
    Login
  </Link>

• 프로그램적으로 네비게이션하기: 컴포넌트 외부나 이벤트 핸들러 내에서 네비게이션이 필요할 경우, expo-router의 router 객체를 사용할 수 있습니다.

  import { router } from 'expo-router';

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