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

리액트 네이티브를 사용하면서 초기에 가장 필요한 기능이 바로 네비게이션 메뉴인것 같다. 이는 메뉴뿐만 아니라 화면을 이동하는데 사용하는 라이브러리이기 때문에 손쉽게 이동을 구현할 수 있다.

 

이번 포스팅에서는 네비게이션 라이브러리를 사용하는 방법을 알아보도록 하겠다.

---

React Navigation

리액트 네비게이션이라는 사이트가 존재한다.

React Navigation: https://reactnavigation.org

현재 6.x 버전이며 이 라이브러리를 다운로드 해서 만들 예정이다. 현재 Expo 를 이용해서 개발하는 방법을 공부하고 있는데 대표 화면에 큼지막하게 Routing and navigation for Expo and React Native apps 라 나와 있어서 아주 속이 편한다.

 

[Read docs] 를 눌러서 사용법을 알아보자

 

먼저 설치를 하기 위해서 사용하는 명령어가 나온다.

yarn add @react-navigation/native

이것만 설치하면 되는것은 아니다. 조금더 아래로 내려보면 expo를 사용할 경우 종속성에 관해서 추가적으로 설치해줘야 하는 dependency가 있다고 한다. 그래서 아래 명령어를 통해서 추가적으로 설치를 해주도록 한다.

npx expo install react-native-screens react-native-safe-area-context

 

이렇게 설치가 완료되면 직접 구현해 보도록 하자.

---

네이게이션 Stack 사용해보기

기본 dependency를 설치했다면 추가적으로 stack을 사용하기 위해서는 아래 depend 라이브러리를 추가적으로 설치해 줘야 한다. 역시 초기 셋팅이 가장 어렵지만 홈페이지에 설명이 잘 되어 있기 때문에 쉽게 따라할 수 있다.

yarn add @react-navigation/native-stack

설치가 끝났다면 소스코드로 돌아와서 구현해 보도록 하자.

 

프로젝트를 기본으로 만들었다면 App.js 가 존재할 것이다. 이는 그대로 두고 새로운 파일 하나를 생성해서 사용하도록 하겠다. 그래서 새로운 파일 StackNavigator.js 를 생성한다.

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

import HomeScreen from './screen/HomeScreen';

const Stack = createNativeStackNavigator();

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

export default StackNavigator

 

Stacknavigator 함수를 만들었고 내부에는 Stack.Navigator, Stack.Screen을 통해서 네비게이션을 등록했다. 그렇다면 가장 첫 화면은 HomeScreen 이 될 것이다. 추가적으로 파일을 만들어 주도록 한다.

 

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

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  )
}

export default HomeScreen

 

이렇게 HomeScreen 까지 만들어 주면 실행후 가장 먼저 보여질 화면은 HomeScreen이 된다.

 

마지막으로 App.js 를 아래와같이 수정한다.

import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './StackNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

 

App 함수 내부에 NavigationContainer를 만들고 그 내부에는 위에서 만든 StackNavigator 를 만들어준다. StackNavigator 내부에 있는 내용을 모두 App 내부로 옮겨와도 전혀 문제가 되지 않지만 App 메인에는 추가적인 작업이 있을 수 있으니 컴포넌트처럼 분리해서 작업하였다.

---

Navigator Stack 을 사용한 결과

결과 화면은 아래와 같다.

아주 잘 나오는 모습을 볼 수 있다. 화면을 추가하는 부분은 다음 포스팅으로.

---

리액트 네이티비를 사용하면 앱을 간단히 만들어 볼때 아주 편한것 같다. 특히 리액트 문법을 알고 있다면 더 쉽게 구현이 가능한 것으로 보인다. 아직도 모르는 부분이 많으니 하나씩 알아가는 재미가 있는것 같다. 다음 포스팅에서는 화면을 하나 더 만들고 화면을 이동하는 방법을 포스팅 할 예정이다.