<div id="readability-page-1" class="page"><div>앱의 척추는 내비게이션이다. API 서버를 구축할 때, 미들웨어 배치와 라우터(컨트롤러)에서 모델(데이터베이스)로 이어지는 구조가 가장 기본이자 코어에 해당하는 구조이듯, 앱에서는 내비게이션 구조가 가장 기본이자 코어에 해당하는 구조라고 할 수 있다.
React Native 는 바로 그 핵심인 내비게이션을 외부 라이브러리에 의존한다. 아주 불만족스러운 부분인데, React Native 자체가 철저히 커뮤니티로부터 개발되는 것을 추구하다보니 어쩔 수 없는 부분일 것이다.
React Native 내비게이션의 "사실상 표준" 라이브러리는 <a href="https://reactnavigation.org/">React Navigation</a> 이다. 솔직히 그냥 React Native 프로젝트 생성 시 같이 깔려버려도 좋을 것 같은 정도다. 일단 설치부터 해보자.
<h2 id="1-react-navigation-설치">1. React Navigation 설치</h2>
설치는 우선 1) npm 라이브러리 설치, 2) 의존관계 라이브러리 추가 설치(자동으로 설치되지 않는다), 3) iOS 및 안드로이드 설정으로 진행된다.
<h2 id="npm-라이브러리-설치">npm 라이브러리 설치</h2>
라이브러리 설치는 간단하다. 아래 명령어로 설치하도록 하자.
<pre><code>yarn add @react-navigation/native</code></pre>
<h2 id="의존관계-라이브러리-추가-설치">의존관계 라이브러리 추가 설치</h2>
React Navigation은 <code>react-native-screens</code>과 <code>react-native-safe-area-context</code>에 의존한다. 그래서 이 두 라이브러리를 추가로 설치해주어야 한다. (왜 같이 깔리지 않는지 의문이다)
<pre><code>yarn add react-native-screens react-native-safe-area-context</code></pre>
여기서 <code>react-native-screens</code> 는 React Native 의 화면 전환을 위한 라이브러리로, 애초에 단독으로 쓰이도록 계획된 라이브러리가 아니다. <code>react-native-safe-area-context</code> 는 React Native 의 <code>SafeAreaView</code> 를 보완하기 위한 라이브러리로, <code>SafeAreaView</code> 의 높이 등과 같은 추가적인 값에 접근할 수 있도록 해준다. React Navigation 을 쓸 경우(무조건 쓸 수 밖에 없지만), React Native 의 <code>SafeAreaView</code> 대신 <code>react-native-safe-area-context</code>의 <code>SafeAreaView</code> 를 쓰는 것이 더 좋다.
<h2 id="ios-및-안드로이드-설정">iOS 및 안드로이드 설정</h2>
iOS 는 으레 하던대로 <code>npx pod-install</code> 을 해주면 된다. 이 명령어는 <code>cd ios &amp;&amp; pod install &amp;&amp; cd ..</code> 와 동일한 작업을 하는 명령어다.
안드로이드의 경우, 보통 자동으로 링크가 되지만, React Navigation 의 경우 아래 코드를 <code>MainActivity.java</code> 파일에 삽입해주어야 한다.
<pre><code>@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(null);
}</code></pre>
아래 import 도 <code>MainActivity.java</code> 파일 상단에 추가해준다.
<pre><code>import android.os.Bundle;</code></pre>
<h2 id="2-react-navigation-사용">2. React Navigation 사용</h2>
React Navigation 을 사용하기 위해서는 루트 파일(<code>./src/App.tsx</code> 과 같은)에서 앱의 모든 React 컴포넌트들을 <code>NavigationContainer</code> 로 래핑 해주어야 한다. <code>NavigationContainer</code> 는 내비게이션을 위해 필요한 값들을 자식 컴포넌트들에 공급하는 역할을 한다. 모르긴 몰라도 아마 React Context 를 이용해서 개발되었겠거니 싶다.
<pre><code>...
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
 ...
 return (
 &lt;NavigationContainer&gt;{/* Rest of your app code */}&lt;/NavigationContainer&gt;
 );
}</code></pre>
이후 원하는 형식의 내비게이션에 따라 <code>@react-navigation/stack</code>, <code>@react-navigation/bottom-tabs</code>, <code>@react-navigation/drawer</code> 등을 추가로 설치해서 사용하면 된다.
<a href="https://reactnavigation.org/docs/getting-started">공식 문서</a>가 상당히 훌륭한 편이니 자세한 사용법에 관해서 참고하길 바란다.
이제 임베디드 데이터베이스를 설치해보자.</div></div>

byron1st.log

안휘

앱의 척추는 내비게이션이다. API 서버를 구축할 때, 미들웨어 배치와 라우터(컨트롤러)에서 모델(데이터베이스)로 이어지는 구조가 가장 기본이자 코어에 해당하는 구조이듯, 앱에서는 내비게이션 구조가 가장 기본이자 코어에 해당하는 구조라고 할 수 있다.
React Native 는 바로 그 핵심인 내비게이션을 외부 라이브러리에 의존한다. 아주 불만족스러운 부분인데, React Native 자체가 철저히 커뮤니티로부터 개발되는 것을 추구하다보니 어쩔 수 없는 부분일 것이다.
React Native 내비게이션의 "사실상 표준" 라이브러리는 React Navigation 이다. 솔직히 그냥 React Native 프로젝트 생성 시 같이 깔려버려도 좋을 것 같은 정도다. 일단 설치부터 해보자.
1. React Navigation 설치
설치는 우선 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;
2. React Navigation 사용
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>
 );
}
이후 원하는 형식의 내비게이션에 따라 @react-navigation/stack, @react-navigation/bottom-tabs, @react-navigation/drawer 등을 추가로 설치해서 사용하면 된다.
공식 문서가 상당히 훌륭한 편이니 자세한 사용법에 관해서 참고하길 바란다.
이제 임베디드 데이터베이스를 설치해보자.

2편. React Navigation 설치

댓글