[React Native] 네비게이션 만들기(2): 두 번째 화면 만들기

지난 포스팅에서는 네이게이션을 이용하여 Stack 첫 화면을 만들었다. 이렇게 쉽게 화면 하나를 만들 수 있다는 점에서 놀라웠다. 물론 아직 아무런 화면의 구성도 만들지 않았지만 말이다.

2023.04.04 - [쿤즈 Dev/React Native] - [React Native] 네비게이션 만들기(1): Home 화면 만들기

[React Native] 네비게이션 만들기(1): Home 화면 만들기

이번 포스팅에서는 두 번째 화면을 만들고 화면 이동을 해 볼 것이다.

---

두 번째 화면 만들기

두 번째 화면은 로그인 화면이라 가정하겠다. 그래서 파일 이름은 LoginScreen.js 로 만들어보았다.

import { View, Text } from 'react-native'
import React from 'react'

const LoginScreen = () => {
  return (
    <View>
      <Text>This is Login Screen</Text>
    </View>
  )
}

export default LoginScreen

아직 아무런 기능과 꾸밈은 없는 상태다. 이렇게 만든 화면에서 이제 이동을 해야 하는데 그 전에 왜 Stack 이라 하는지 잠시 알아보자. Stack은 무언가를 계속해서 위로 쌓아가는것을 의미한다. 그래서 위로 쌓고 위에서 빼는 LIFO의 형태를 말한다.

 

화면도 마찬가지이기 때문에 Stack 이라 부르는것 같다. 새로운 화면은 현재 화면의 위에 나타나고 뒤로가면 그 화면은 사라진다. 그런 의미에서 Stack 이란 말이 이해가 되기 쉬운것 같다.

 

다시 본론으로 돌아와서 Stack Navigation 에게 어떤 화면들이 있는지 먼저 알려주어야 한다. 그래서 StackNavigator.js 파일을 아래와 같이 수정해보자.

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screen/HomeScreen';
import LoginScreen from './screen/LoginScreen';

const Stack = createNativeStackNavigator();

const StackNavigator = () => {
  return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
  )
}

export default StackNavigator

LoginScreen 이라는 Stack.Screen 이 하나 더 추가되었다. 이제 화면도 두 개인 사실을 알려주었고 새로운 화면인 LoginScreen도 만들었다. 이제 필요한것은 Action이다. 즉, 어떤 행위(버튼을 누르는)를 만들어서 두 번째 화면으로 넘어가게 만들어야 한다.

 

최초 진입은 HomeScreen 이므로 여기에 버튼을 추가하고 액션을 추가해 보도록 하자.

import { View, Text, Button } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native'

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Text>HomeScreen</Text>
      <Button title='Go to Login Screen' onPress={() => navigation.navigate('Login') } />
    </View>
  )
}

export default HomeScreen

기존에는 없던 Button 을 만들어 주었고 여기에 onPress 라는 기능을 추가해 주었다. onPress 는 버튼을 누르는 행위의 함수이다. 이 함수에 어떤 기능을 할지 정의해 주면 된다.

 

화면을 전환하기 위해서는 useNavigation() 객체를 받아서 사용한다. 이를 받은 객체를 navigation 이라 만들었고 이 객체의 navigate() 라는 함수에 Stack으로 정한 이름을 넣어주면 된다.

---

두 번째 화면 전환 결과

결과를 보도록 하자.

버튼이 생겼고 버튼을 눌렀을때 새로 만든 Login Screen 으로 이동하는것을 확인할 수 있다. 

---

이번 포스팅에서는 여러개의 화면을 만들고 전환하는 것을 만들어 보았다. 리액트 네이티브가 생각보다 쉽고 재미있는 느낌이다. 리액트를 이용해서 컴포넌트를 잘 만들어 놓으면 많은 부분이 그대로 전환될것 같다. 그리고 API 들이 있다면 그 부분들은 그대로 사용 가능하니 이 또한 장점으로 보인다.

 

다음 포스팅에서는 권한별 화면을 나눠보는 것을 해보도록 하겠다.