[reactive] Navigation 알아보기(1)

환경 : M1, version 12.1
시뮬레이터 : iPhone13 (ios 15.2)
툴 : Visual Studio Code
React Navigation version 6.x

React Navigation 설치와 사용법을 알아보도록 하겠습니다.
[Stack] 화면 Linking, Params 을 이용하여 User화면과 Home화면을 이동합니다.

리액트에서 네비게이션은 화면전환이라고 생각하시면 됩니다.
React Navigation 을 설치하겠습니다.

터미널에서 프로젝트 경로로 이동한 후 명령어를 입력합니다.

npm install @react-navigation/native @react-navigation/native-stack

그 후, 의존성 추가를 위해 다음 명령어도 입력합니다.

npm install react-native-screens react-native-safe-area-context

추가로 몇 가지만 더 진행하겠습니다.

cd ios
pod install
cd ../

ios 폴더로 이동하여 pod install 후 다시 프로젝트 디렉토리로 돌아옵니다.
src 폴더를 생성해주고 home.js와 user.js 파일을 생성합니다.

user.js

 import React, {Component} from 'react';
 import {Text, View, Button} from 'react-native';
 
 class UserScreen extends Component{
   render(){
     return(
      <View
      style={{
        flex:1,
        alignItems :'center',
        justifyContent: 'center'
      }}> 
         <Text>User Screen</Text>
         <Button
          title='To Home Screen'
          onPress={() =>{
            this.props.navigation.navigate('Home')
          }}
         />
     </View>
     )
   }
 }
 
 
 export default UserScreen;
 

home.js

 import React, {Component} from 'react';
 import {Text, View, Button} from 'react-native';
 
 class HomeScreen extends Component{
   render(){
     return(
         <View
          style={{
            flex:1,
            alignItems :'center',
            justifyContent: 'center'
          }}> 
             <Text>Home Screen</Text>
             <Button
              title='To User Screen'
              onPress={() =>{
                this.props.navigation.navigate('User')
              }}
             />
         </View>
     )
   }
 }

 
 export default HomeScreen;
 

App.js

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/home';
import UserScreen from './src/user';


const Stack = createNativeStackNavigator();

class App extends Component{
  
  render(){
    return(
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Home'>
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen name="User" component={UserScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default App;

App.js 에서 home.js와 user.js를 각각 HomeScreen, UserScreen으로 import 하였습니다.
Navigation 을 사용하기 위해 NavigationContainer, createNativeStackNavigator 도 import한 후 Stack이라는 변수를 선언합니다.
그 후 home.js 와 user.js 에서 Button 을 이용하여 home화면과 user화면을 이동할 수 있도록 하였습니다.

home.js에서 onPress부분을 보도록하겠습니다.
네비게이션 프랍에 있는 네비게이션 함수를 호출합니다.

"this.props.navigation.navigate()" 를 사용할 수 있는 이유는 App.js에서 Stack이라는 함수를 정의 했습니다.
Screen 이라는 property를 return할 때 Screen component를 명시해주는데 네비게이션 프랍을 각각의 Screen component에 넘겨주고 됩니다. 따라서 Screen component에서는 this.props를 이용해서 네이게이션 프랍을 이용할 수 있는 것 이고, 네비게이션 프랍에 정의된 navigate()를 호출할 수 있게됩니다. 네비게이트 함수의 인자로는 App.js에서 정의한 Screen name값을 입력해줍니다.

이후 실행하게되면

버튼을 누르게되면화면이 이동하는 것을 확인할 수 있습니다.
이제는 Params를 이용해 데이터를 넘겨보도록 하겠습니다.(home->user)

home.js의 navigate() 인자값에 name값과 넘기고싶은 데이터들을 추가합니다.

this.props.navigation.navigate('User', {
                  userIdx: 123,
                  userName: 'DaeWon',
                  userLastName: 'Big'
                })

user.js에서는 params를 받을 변수를 선언하도록 합니다.
render(){ 안에 추가해줍니다.

const {params} = this.props.route;
const userIdx = params ? params.userIdx : null;
const userName = params ? params.userName : null;
const userLastName = params ? params.userLastName : null;

그 후 값을 출력하기위해 Button밑에 Text를 이용하고 String형으로 변환하여 출력합니다.

<Text>User Idx : {JSON.stringify(userIdx)}</Text>
<Text>User Name : {JSON.stringify(userName)}</Text>
<Text>User LastName : {JSON.stringify(userLastName)}</Text>

아래와 같이 데이터를 받아 사용할 수 있는것을 확인해보았습니다.

App.js

import React, {Component} from 'react';
import { Text, View} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/home';
import UserScreen from './src/user';

const Stack = createNativeStackNavigator();

class App extends Component{
  
  render(){
    return(
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Home'>
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen name="User" component={UserScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}


export default App;

home.js

 import React, {Component} from 'react';
 import {Text, View, Button} from 'react-native';
 
 class HomeScreen extends Component{
   render(){
     return(
         <View
          style={{
            flex:1,
            alignItems :'center',
            justifyContent: 'center'
          }}> 
             <Text>Home Screen</Text>
             <Button
              title='To User Screen'
              onPress={() =>{
                this.props.navigation.navigate('User', {
                  userIdx: 123,
                  userName: 'DaeWon',
                  userLastName: 'Big'
                })
              }}
             />
         </View>
     )
   }
 }

 export default HomeScreen;
 

user.js

 import React, {Component} from 'react';
 import {Text, View, Button} from 'react-native';
 
 class UserScreen extends Component{
   render(){

    const {params} = this.props.route;
    const userIdx = params ? params.userIdx : null;
    const userName = params ? params.userName : null;
    const userLastName = params ? params.userLastName : null;
     return(
      <View
      style={{
        flex:1,
        alignItems :'center',
        justifyContent: 'center'
      }}> 
         <Text>User Screen</Text>
         <Button
          title='To Home Screen'
          onPress={() =>{
            this.props.navigation.navigate('Home')
          }}
         />
         <Text>User Idx : {JSON.stringify(userIdx)}</Text>
         <Text>User Name : {JSON.stringify(userName)}</Text>
         <Text>User LastName : {JSON.stringify(userLastName)}</Text>
     </View>
     )
   }
 }

 
 export default UserScreen;