퀴즈앱 5일차(Expo router 사용법)

오늘은 이력서 수정한다고 시간을 많이 사용해서 간단하게 expo 설치 및 router 사용해보기로 했습니다~

 

앱을 만드는데 react-router-dom 처럼 사용할 수 있지 않을까 해서 찾아보니 Expo router가 있다고 하네요!

 

우선 expo먼저 설치해줍니다.

 

npx create-expo-app@latest --template

 

저는 Blank (typescript) 로 설치했습니다.

 

expo go 앱을 통해 테스트 해봅니다.

 

npm run start

 

이제 라우터를 설치해봅시다. 참고로 아래 링크에 잘 나와 있습니다!

 

Install Expo Router - Expo Documentation

Install Expo Router

 

우선 종속성 설치부터 해봅시다.

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

 

설치가 끝이 나면 package.json에 가서 아래처럼 main을 수정합니다.

 

{
  "main": "expo-router/entry"
}

 

이번엔 app.json파일로 가서 아래처럼 추가합니다.

{
  "scheme": "your-app-scheme"
}

 

다음은 babel.config.js로 가면 기본값이 아래처럼 되어 있을 겁니다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
  };
};

 

만약 babel이 수정되었다면 아래처럼 실행시켜 캐시를 지워줍니다.

npx expo start -c

 

자 이제 설치는 끝이 났습니다!

 

간단하게 router 테스트를 해봅시다~

 

우선 루트에 app 폴더를 만들어주세요!

그 안에 index.tsx 파일을 만들고 간단하게 아래처럼 작성해주세요.

import { Link } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>안녕!</Text>
      <Link
        style={styles.button}
        href={{
          pathname: "/login",
        }}
      >
        <Text style={styles.buttonText}>로그인 페이지로</Text>
      </Link>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    marginTop: 20,
    padding: 20,
    backgroundColor: "skyblue",
    borderRadius: 10,
  },
  buttonText: {
    color: "white",
    fontSize: 16,
  },
});

 

그리고 app/login/index.tsx 이렇게 만들어주세요.

그 안에는 아래처럼 작성하겠습니다.

 

import { Link } from "expo-router";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function LoginPage() {
  return (
    <View style={styles.container}>
      <Link
        style={styles.button}
        href={{
          pathname: "/",
        }}
      >
        <Text style={styles.buttonText}>홈으로</Text>
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    marginTop: 20,
    padding: 20,
    backgroundColor: "skyblue",
    borderRadius: 10,
  },
  buttonText: {
    color: "white",
    fontSize: 16,
  },
});

 

자 실행시켜봅시다 두근두근 expo go 앱을 켜서 QR로 들어가면!

 

짜잔~ 아직 별거는 없지만 이렇게 나옵니다. 

 

자 이제 로그인 페이지로 이동버튼을 눌러볼까요~?

 

 

 

자 이렇게 왔다갔다 라우팅할 수 있는 앱이 완성되었습니다! 

 

오늘은 여기까지 하고 나머지는 내일의 저에게 맡기는 걸로 하겠습니다~! 

오늘도 부족한 저의 글을 읽어주셔서 감사합니다~ 모두 행복하세요~