BIC Day2 - router 설정 및 페이지 이동 테스트하기

October 01, 2019

관련 코드는 여기 에서 확인 가능합니다 :)

첫째날에는 create-react-native 를 이용하여 App 프로젝트를 생성하고, typescript 환경으로 구성했습니다. 오늘은, Home, Map 두개의 페이지를 만들고, react-router-native를 이용하여 router를 구성해, 각 페이지에 연결시켜보고자 합니다.

router 설정하기

1) react-router-native 설치하기

yarn add react-router-native

라우터를 설정하기 위해서 react-router-native를 설치합니다. :)

2) Home.tsx, Map.tsx 만들기

저는 component모음은 components 폴더에, 페이지 모음은 containers 에 만들고자 했습니다. containers 폴더에 Home.tsx, Map.tsx 예시파일을 만들었습니다.

  • Home.tsx
import * as React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const Home = () => { return ( <View style={styles.container}> <Text>Open up App.tsx to start working on your app!</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); export default Home;
  • Map.tsx
import * as React from 'react'; import { View, Text } from 'react-native'; const Map = () => { return ( <View style={styles.container}> <Text>Map Page</Text> </View> ); }; const styles = { container: { flex: 1, backgroundColor: '#fff', }, }; export default Map;

3) Routes 컴포넌트 만들기

App.tsx에서 바로 router를 설정해 주어도 되겠지만, 저는 Routes.tsx를 만들고, 라우팅만 관리하는 컴포넌트를 하나 따로 생성하고자 했습니다.

import * as React from 'react'; import { NativeRouter as Router, Route, Switch } from 'react-router-native'; // containers import Home from 'containers/Home'; import Map from 'containers/Map'; const Routes = () => { return ( <Router> <Switch> <Route exact path='/' component={Home} /> <Route exact path='/map' component={Map} /> </Switch> </Router> ); }; export default Routes;

react-router-native는 웹용으로는 react-router-dom 이 있습니다. 사용법은 거의 동일합니다. 다만, react-router-dom에는 BrowserRouter HashRouter 처럼 라우터의 종류별로 객체가 생성될수 있는게 특징입니다. Home과 Map 컨테이너들을 라우터에 연결시켜 줍니다.

4) App.tsx 수정하기

Routes 컴포넌트를 연결하고 이전에 있던 내용은 삭제했습니다.

import React from 'react'; import { StyleSheet } from 'react-native'; import Routes from './src/Routes'; export default function App() { return ( <Routes /> ); }

yarn start를 이용해서 iOS Simulator를 띄우면, /로 설정했던 Home 컨테이너로 먼저 이동합니다.

5) 페이지 이동을 위한 Link 추가하기

페이지 이동을 위해, Home 컨테이너와 Map 컨테이너 두 화면에 Link를 이용하도록 하겠습니다. react-router-native 내에는 Link 컴포넌트가 있어, 페이지 이동시 활용할 수 있습니다.

Home.tsx

const Home = () => { return ( <View style={styles.container}> <Text>Open up App.tsx to start working on your app!</Text> <Link to='/map'> <Text>Move to Map</Text> </Link> </View> ); };

Map.tsx

const Map = () => { return ( <View style={styles.container}> <Text>Map Page</Text> <Link to='/'><Text>Move to Home</Text></Link> </View> ); };

결과물

결과물은 이렇게 나옵니다. :)

이로써, 라우터 설정 및 화면 이동 테스트가 끝났습니다. 인제, 디자인 컴포넌트를 선정하고, 화면에 적용할 일이 남았네요 :)

...