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>
  );
};

    결과물

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

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

    ...

    @2020 kern.yoo All Right Reserved.