React Native Navigation

개요

모바일 어플리케이션은 보통 여러 화면으로 구성되어 있다.
인스타그램을 예로 들었을때 회원인증, 홈, 검색, 사진 추가, 프로필 등으로 구성되어 있다.
이렇게 여러 화면으로 구성된 어플리케이션을 만들려면 네비게이션 관련 서드파티 라이브러리를 사용해야한다.
대표적으로 사용할 수 있는 라이브러리는 두 개가 있다.

react-navigation

리액트 네이티브 공식 커뮤니티에서 관리하며, 사용률이 가장 높은 라이브러리다.
리액트 공식 매뉴얼에서도 이 라이브러리로 화면을 전환하는 방법에 대해 소개한다.
이 라이브러리는 내비게이션 기능이 자바스크립트로 구현되어 있다.

react-navtive-navigation

홈페이지 제작 서비스 Wix에서 관리한다.
이 라이브러리는 이미 만들어진 네이티브 앱에 리액트 네이티브를 적용하는 경우 사용하기에 적합하며,
내비게이션 기능이 자바스크립트가 아닌 각 플랫폼의 네이티브 코드로 구현되어 있기 때문에
react-navigation보다 더욱 네이티브스러운 사용 경험을 제공한다

설치 및 적용

react-navigation을 설치하고 사용방법을 기재해보겠다.
yarn을 사용하여 @react-navigation/native 모듈을 설치한다.

cd 새로운 프로젝트 폴더명
yarn add @react-navigation/native

react-navigation이 의존하는 라이브러기가 몇 가지 있다. 의존 라이브러리도 설치한다.

yarn add react-native-screens react-native-safe-area-context

그리고 ios 디렉토리에 들어가서 Pod을 설치해준다(맥을 쓰지 않는 경우 생략)

라이브러리 적용하기

리액트 네이티브 프로젝트에 라이브러리를 적용하기 위해서는 @react-navigation/native에서 NavigationContainer 컴포넌트를 불러와 사용해 앱 전체를 감싸줘야한다.

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

function App() {
  return <NavigationContainer>{/*네비게이션 설정 */}</NavigationContainer>
}

export default App;

기본 사용법

웹에서는 구글와 같은 태그를 사용해 링크를 클릭하면
해당 주소로 이동하고, 이동 후에는 뒤로가기 버튼을 눌러서 뒤로 이동하고 다시 앞으로 가기 버튼을 눌러서
앞으로 이동할 수 있다. 웹 브라우저에 탑재된 History 기능이 있어 가능한 일이다. History는
스택 자료구조를 사용해 구현되어 있다.
리액트 네이티브 앱에서는 화면을 전환할 때 브라우저의 History와 비슷한 사용성을 제공하기 위해 네이티브 스택 네비게이터(Native Stack Navigation)을 사용한다.

네이티브 스택 네비게이터

리액트 네비게이션 라이브러리에는 다른 상황에서 사용할 수 있는 다양한 네비게이터가 있다.
그 중 리액트 네이티브 스택 네비게이터는 가장 보편적으로 사용되며 안드로이드에서는 Fragment를
ios에서는 UINavigationController를 사용해 일반 네이티브 앱과 정확히 동일한 방식으로 화면을 관리한다. 스택 네비게이터를 사용하기 위해서는 라이브러리를 추가적으로 설치해줘야한다.

yarn add @react-navigation/native-stack

참고 및 출처 : 리액트 네이티브를 다루는 기술