2편. React Navigation 설치

byron1st·2021년 10월 10일

ReactNative 프로젝트 셋팅

목록 보기

2/4

앱의 척추는 내비게이션이다. API 서버를 구축할 때, 미들웨어 배치와 라우터(컨트롤러)에서 모델(데이터베이스)로 이어지는 구조가 가장 기본이자 코어에 해당하는 구조이듯, 앱에서는 내비게이션 구조가 가장 기본이자 코어에 해당하는 구조라고 할 수 있다.

React Native 는 바로 그 핵심인 내비게이션을 외부 라이브러리에 의존한다. 아주 불만족스러운 부분인데, React Native 자체가 철저히 커뮤니티로부터 개발되는 것을 추구하다보니 어쩔 수 없는 부분일 것이다.

React Native 내비게이션의 "사실상 표준" 라이브러리는 React Navigation 이다. 솔직히 그냥 React Native 프로젝트 생성 시 같이 깔려버려도 좋을 것 같은 정도다. 일단 설치부터 해보자.

설치는 우선 1) npm 라이브러리 설치, 2) 의존관계 라이브러리 추가 설치(자동으로 설치되지 않는다), 3) iOS 및 안드로이드 설정으로 진행된다.

npm 라이브러리 설치

라이브러리 설치는 간단하다. 아래 명령어로 설치하도록 하자.

yarn add @react-navigation/native

의존관계 라이브러리 추가 설치

React Navigation은 react-native-screens과 react-native-safe-area-context에 의존한다. 그래서 이 두 라이브러리를 추가로 설치해주어야 한다. (왜 같이 깔리지 않는지 의문이다)

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

여기서 react-native-screens 는 React Native 의 화면 전환을 위한 라이브러리로, 애초에 단독으로 쓰이도록 계획된 라이브러리가 아니다. react-native-safe-area-context 는 React Native 의 SafeAreaView 를 보완하기 위한 라이브러리로, SafeAreaView 의 높이 등과 같은 추가적인 값에 접근할 수 있도록 해준다. React Navigation 을 쓸 경우(무조건 쓸 수 밖에 없지만), React Native 의 SafeAreaView 대신 react-native-safe-area-context의 SafeAreaView 를 쓰는 것이 더 좋다.

iOS 및 안드로이드 설정

iOS 는 으레 하던대로 npx pod-install 을 해주면 된다. 이 명령어는 cd ios && pod install && cd .. 와 동일한 작업을 하는 명령어다.

안드로이드의 경우, 보통 자동으로 링크가 되지만, React Navigation 의 경우 아래 코드를 MainActivity.java 파일에 삽입해주어야 한다.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

아래 import 도 MainActivity.java 파일 상단에 추가해준다.

import android.os.Bundle;

React Navigation 을 사용하기 위해서는 루트 파일(./src/App.tsx 과 같은)에서 앱의 모든 React 컴포넌트들을 NavigationContainer 로 래핑 해주어야 한다. NavigationContainer 는 내비게이션을 위해 필요한 값들을 자식 컴포넌트들에 공급하는 역할을 한다. 모르긴 몰라도 아마 React Context 를 이용해서 개발되었겠거니 싶다.

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

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