[React-Native] #2. React Native - navigation 이용한 페이지 이동

react native 에서 @react-navigation 을 이용하여 라우터를 처리할 수 있다.
간단하게 페이지 이동 컴포넌트를 만들어보고자 한다.
문서에 명시된 소스코드는 예시이기 때문에 실제 작업한 내용과 다를 수 있다.
각각이 어떻게 연결되는지 직접적으로 확인하기 위해 명명규칙을 직역적으로 진행했다.

#0. 공식문서

https://reactnavigation.org/docs/getting-started/

https://reactnavigation.org/docs/getting-started/

#1. navigation 패키지 설치하기

패키지 설치 모듈을 통해 @react-navigation/native  및 @react-navigation/native-stack 을 설치

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

# 1.1. @react-navigation/stack vs @react-navigation/native-stack

아직 각각 기능에 대하여 깊이 공부 중은 아니고 때에 맞춰 사용하기 위해 간단하게 정리하고자 함

• @react-navigation/stack
  • 사용자 정의가 가능 한 navigation
  • 커스텀이 자유로우나 자칫 잘못하면 native-stack에 비해 성능이 느려질 수 있음
• @react-navigation/native-stack
  • 사용자 정의가 제한적인 navigation
  • 단순한 page router에 사용하기 좋음

#2. navigation 페이지 설정하기

React-Native 프로젝트의 App.js를 아래와 같이 설정

• 참고문서: https://reactnavigation.org/docs/screen/

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from "@react-navigation/native-stack";

/* routing screen */
import Router_1 from './screen/Router_1';
import Router_2 from './screen/Router_2';

const Stack = createNativeStackNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="one" component={Router_1}/>
        <Stack.Screen name="two" component={Router_2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

• @react-navigation/native 모듈의 NavigationContainer 로 태그 감싸기
• @react-navigation/native-stack 모듈의 createNativeStackNavigator(이하 stack) 함수를 통해 navigator 대상 컴포넌트(screen) 정의
  • Stack.Navigator : navigation 영역 
    • Stack.Screen : navigation 대상 컴포넌트 정의
      • name: router로 사용할 지정 name
      • component: router로 이동할 컴포넌트 (screen 페이지)

#3. navigation 사용하기 (호출하기)

호출 방법은 단순함

navigation.navigate(`${name}`) // NextJS router와 유사

단, navigation을 사용하기 위해선 props로 navigation을 받아와야 함

• App.js에서 Stack.Navigator와 Stack.Screen을 이용하여 컴포넌트를 호출하기 때문에 navigation props를 사용할 수 있음

// Screen/Router_1.jsx

const Router_1 = ({ navigation }) => {

 	const onPress = () => navigation.navigate('two');
	
    return (
    	<View>
        	<Button onPress={onPress} title="Router_2로 이동" />
        </View>
    );
};

export default Router_1;

 

#4. 정리

router 시 데이터 전달이 필요하다면 param 등의 옵션을 활용할 수 있으며, 좀 더 세부적인 정의가 필요하다면 native-stack 이 아닌 stack 모듈을 활용하는 것이 좋음

@react-navigator를 이용하여 단순하게 라우터만 설정해도 각 앱에 맞는 모션(?)으로 화면 이동이 구성되므로 간편하게 사용할 수 있어 보임