React Native Navigation

Navtigation

우선 어플의 Navigation을 이해하기 앞서 단어의 뜻을 이해하면, 항해와 운항을 의미한다. 말그대로 어플개발에 앞서 Navigtion 기능은 Application 쪽의 화면인 Activity 구성하며 화면의 흐름을 구성하는 요소라고 합니다.

참고: 핀터레스트 ( Matthew Perez )

 

위에 이미지는 어플이 흐름도의 이해를 위해서 붙여두었으며 이런식으로 페이지가 전환이 된다는 느낌을 주었습니다.

 

이미지를 보시면 어플의 Activity에서 다른 Activity로 넘어갈 수 있도록 흐름의 구조를 세팅하며, 페이지 전환을 돕도록 하는 기능이라고 보시면 됩니다.

 

RN에서는 신기하게 RN 공식 홈페이지에서 이 Navigation을 지원하는 것이 아니라 다른 오픈소스를 통해서 사용을 합니다. 이야기를 듣기로는 RN에서는 자신들이 유지보수를 최소한하기 위해서 건들 수 있는 부분만 유지보수하고 나머지는 우리 오픈소스를 통해서 커뮤니티 사람들이 운영하는 방식을 이용하고있습니다.

 

저는 RN(React Native) 을 개발하면서 Navigation 자연스럽게 접하게 되면서 사용법과 디테일하게 다루려고합니다.

---

React Native Navigation 란?

 

https://reactnavigation.org/

React Navigation | React Navigation

 

 

앞에서 이야기가 나왔듯이 Navigation을 이용하게 도와주는 오픈소스 라이브러리 입니다. RN의 Navigation 은 기본 RN의 세팅과 Node가 세팅이 되어야 사용이 가능합니다. 그렇기에 미리 세팅을 하고 오셔야 가능합니다.

 

그럼 아래의 명령을 통해서 설치하시면, 기본으로 사용을 할 수 있습니다. 물론 저는 RN으로 사용해도 되지만, 기본 세팅 RN과 비슷한 Expo 프레임워크를 이용하여서 밑에 라이브러리를 사용할 예정입니다. Expo 프레임워크는 링크를 통해서 설명해두었습니다.

 

명령어

npm install @react-navigation/native

 

그런다음, 아래의 코드처럼 네비게이션을 기본 세팅을 위한 코드를 입력해줍니다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

 

Rest of your app code 안에 세팅을 해주면 되는데 저는 아래의 코드처럼 정의를 했습니다.

 

...
export default function App() {
  return (
    <NavigationContainer>
      <NativeStack.Navigator
        initialRouteName="Root"
        options={{
          cardStyleInterpolator: ({ current }) => {
            console.log(current);
            return {
              cardStyle: {
                opacity: current.progress,
              },
            };
          },
          headerShown: false,
        }}
      >
        <NativeStack.Screen
          name="Root"
          component={StackNavigator}
          options={{ headerShown: false }}
        />
        <NativeStack.Screen
          name="Feed"
          component={StackNavigator}
        />
      </NativeStack.Navigator>
    </NavigationContainer>
  );
}
...

 

위에 코드를 조금 간단히 설명 드리면, 아래의 리스트를 참고하시면 됩니다.

 

1. NavigationContainer: 앱의 네비게이션 구조를 감싸는 컴포넌트. 모든 네비게이션 구조는 이 컴포넌트 내부에 있어야 합니다.
2. NativeStack.Navigator: 스택 네비게이터를 생성합니다. 스택 네비게이터는 화면을 스택처럼 쌓아서 관리하는 방식을 사용합니다.
3. initialRouteName: 네비게이터가 처음 렌더링될 때 보여줄 화면의 이름을 지정합니다. 여기서는 "Root"로 지정되어 있습니다.
4. options - cardStyleInterpolator: 화면 전환 효과를 커스터마이징합니다. 여기서는 현재의 진행 상황(progress)을 기반으로 화면의 불투명도(opacity)를 조절하여 전환 효과를 만들고 있습니다.
5. headerShown: 네비게이터 헤더의 표시 여부를 설정합니다. 여기서는 false로 설정되어 헤더가 보이지 않게 합니다.
6. NativeStack.Screen: 개별 화면을 정의하는 컴포넌트입니다. 각 화면은 name과 component 프로퍼티를 통해 식별됩니다.
   • "Root" 화면: StackNavigator 컴포넌트를 사용하며, 헤더가 표시되지 않도록 설정되어 있습니다.
   • "Feed" 화면: 동일한 StackNavigator 컴포넌트를 사용합니다. 이 화면에 대한 추가적인 옵션은 지정되지 않았습니다.
   • "component" 의 옵션에는 필수로 화면에 뿌려줄 페이지 소스가 있어야 합니다.

 

그런데   NativeStack이라고 정의 되어있는 부분이 있는데, 이부분을 다른 Navigation종류로 전환도 가능합니다.

 

 

React Native Navigation 종류

RN의 Navigation에는 여러가지 종류가 있습니다. 위에서는 이미 네비게이션 스택이라는 걸 이야기를 했지만, 이거 말고도 다른 종류가 엄청 많이 있습니다.

 

• 스택 네비게이터:  각 화면(Screen)을 스택에 쌓아서, 사용자가 앱 내에서 뒤로 가거나 새 화면으로 전환할 수 있게 합니다. 
  
  
• 네이티브 스택 네비게이터: 위에서 사용한 코드이며, 스택 네비게이터와 비슷합니다. 하지만 위에 스택 네비게이터와 차이점은 이 컴포넌트는 유일하게 android or ios 네이티브 코드를 이용하여 네이티브적 기능을 이용합니다.
  
  
• 탭 네비게이터: 화면 하단에 탭을 통해 사용자가 다른 화면으로 쉽게 전환할 수 있도록 합니다
  
  
• 드로어 네비게이터: 화면 옆에서 슬라이드하여 나오는 메뉴를 통해 다른 화면으로 이동할 수 있습니다.

 

 

추가적인 소스와 사용법이 밑에 나왔습니다. 여기에서 실행해보시면 바로 테스트를 해볼 수 있습니다.

(소스는 계속해서 수정 해나갈겁니다.)

 

https://github.com/YunInSoo/RNavigateDocs

GitHub - YunInSoo/RNavigateDocs: React Navtive의 Navigate 기능을 활용한 프로젝트

 

 

이처럼 RN Navigation을 알아보며 정리를 하는 시간을 가져 보았습니다. 저는 한동안 웹개발자로 Router 형태를 쭉 배워왔지만, 여기에서는 Navigation의 의미로 새롭게 배우는 시간이 되었습니다. 뭐든지 제일 초반 기반을 새우기 위해서는 라우터, Navigation같은 화면 전환 구조가 제일 중요하다고 생각하며, 그 기반이 잘 세팅이 되어있을때 뭐든 쉽게 유지보수한다고 생각합니다.

 

내가 나아고자 하는 방향도 Navigation 같은 구조가 있다면?? 얼마나 더욱더 편하겠는가?

•