react navigation 배우기 1부 - 기초지식

https://reactnavigation.org/docs/hello-react-navigation

https://reactnavigation.org/docs/hello-react-navigation/

 

 

1. 개요

웹에서는 <a> 태그로 링크를 타고 다른페이지로 넘어가고, 백버튼을 눌러서 페이지 뒤로가기가 가능하다. 그리고 이는 stack 의 형태로 관리된다. 허나 리액트 네이티브에서는 자체적으로 웹처럼 built-in으로 내장된 stack 관리가 없다. 그래서 나온것이 react navigation이다. 이를 이용하면 웹페이지처럼 페이지를 스택으로 관리 가능하다

 

 

 

2. 설치

아래 커맨드로 설치하자

npm install @react-navigation/native-stack
또는
yarn add @react-navigation/native-stack

 

 

 

3. StackNavigator 생성하기

NavigationContainer는 네비게이션 트리를 관리하고 Natigation State를 포함한다. 그리고 이 컴포넌트는 모든 네이게이션 구조를 감싸야 된다. 일반적으로 이는 최상위 루트에 위치하며, 주로 App.js에 작성된다.

 

createNativeStackNavigator 라는 함수를 이용하여 StackNavigator를 생성한다. 이 네비게이터는 두개의 컴포넌트를 가지고 있다.

• Screen
• Navigator

위 두개는 모두 네비게이터를 구성하기 위한 리액트 컴포넌트이다. Navigator는 Screen을 자식 엘리먼트로 포함하며 이 스크린은 하나의 route가 된다.

• Screen은 name이라는 prop을 받게 되는데 이는 route의 navigating에 사용되는 하나의 url같은 개념이다
• Screen은 또한 component라는 prop을 받는데, 이는 해당 route에 대응되는 페이지이다

Navigator에는 initialRouteName이라는 prop이 있다. 이는 초기 stack에 어떤 페이지를 나타낼지를 나타낸다

 

위에 세가지 색으로 칠해진 내용을 기억하고 아래 링크를 타고 들어가 initialRouteName을 디테일 페이지로 바꿔주는 작업을 해 보자!

 

테스트해보기

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

 

4. 스크린 option 제공하기

스크린에는 option이라는 걸 제공할 수 있다. 사용법은 아래와 같다. 아래의 예제는 타이틀을 바꾸는 예제이다

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

 

 

 

5.  스크린에 props 제공하기

공식문서에는 다음과같이 두가지 방법으로 스크린에 props를 제공하라고 하고 있다

 

• 리액트의 context를 이용하라(권장사항)
• 아래와 같이 render callback을 이용하는 법

<Stack.Screen name="Home">
  {(props) => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

허나 위와같이 arrow function을 사용하는것은 리액트의 rerendering의 최적화를 깨버려서 퍼포먼스의 문제를 야기시킨다고 한다. 그러므로 context를 이용하는것을 권장한다.