1. React Navigation

1
yarn add @react-navigation/native
2

3
# expo 사용 시 추가 설치
4
yarn add react-native-screens react-native-safe-area-context
5

6
# cf. https://reactnavigation.org/docs/hello-react-navigation#installing-the-native-stack-navigator-library
7
yarn add @react-navigation/native-stack

• React-Native에서 사용하는 화면 이동을 위한 라이브러리
• Stack, BottomTab, Drawer등 앱 개발시 많이 사용하는 화면 이동에 대해,
  • 각 플랫폼 환경에 맞도록 쉽게 변환 해 주도록 되어있음
  • cf. https://reactnavigation.org/
  • cf. https://reactnavigation.org/docs/getting-started/#installation
• 구성요소 : Navigator + Screen
  • Navigator : Navigation이 어떤 구조로 되어있는지 나타내는 컴포넌트 (Screen의 집합)
  • Screen : 화면을 그리는 컴포넌트

1.1 Stack Navigator

• Stack과 동일한 자료 구조로 화면을 그리는 Navigator
• 제일 마지막에 들어온 화면이 제일 먼저 없어짐
• React-Navigation에서 필요한 애니메이션등은 구현 됨
• Stack Navigator : JS로 작성, 자유도 높음
• Native Stack Navigator : Native로 작성 자유도 낮음

1.2 Drawer Navigator

• 슬라이드를 통해서 이동할 Screen들을 나타내는 Navigator
• Drawer에 대한 open, close, toggle등 기본적인 기능들을 함수로 제공
• Gmail, LinkedIn등에서 사용

1.3 Tab Navigator

1
# https://reactnavigation.org/docs/tab-based-navigation
2
yarn add @react-navigation/bottom-tabs

• 가장 흔하게 앱에서 볼 수 있는 UI
• 기본적으로 하단에 탭의 형태로 제공
• Material UI를 통해서 제공하는 별도 UI도 제공
  • (Material Bottom Tabs Navigator, Material Top Tabs Navigator)

2. React Life cycle

• constructor → render → componentDidMount → componentWillUnmount

3. 용어 정리

1. Navigator
   • 화면을 어떻게 그려줄지 결정해주는 리액트 컴포넌트 (e.g. 책 겉표지)
   • Navigation Container : 전체 Navigator를 관리해주는 역할
2. Router
   • Navigation의 상태나 동작을 제어해주는 함수의 집합.
   • 주로 화면간 데이터 전달을 위해 사용
3. Screen : 화면을 그려주는 컴포넌트 (e.g. 책에서 종이 한장)
4. Navigation Prop : 화면 이동에 대한 함수들을 공통으로 제공
5. Route Prop : 파라미터를 받아오거나 어떤 화면인지 이름을 알 수 있는 값들을 제공해주는 역활
6. Navigation State
   • 현재 React Navigation이 어떤 상태인지를 알 수 있는 값
   • 주로 Stack Navigator 이전 Stack에 어떤 Screen이 있는지 찾기 위해 사용
7. Route
   • Screen의 Name, Key, Param등을 저장하는 개념
   • 어떤 화면인지 식별 하기 위해 사용.
   • Navigation State 하위에 Routes라는 배열에서 찾을수 있음

4. Stack Navigator Screen 옵션

4.1 presentation

• Stack Navigator에서 화면 이동 애니메이션에 대한 설정 옵션
  • Card : 오른쪽에서 왼쪽으로 이동하는 애니메이션
  • Modal : 아래에서 위로 이동하는 애니메이션

4.2 backBehavior

• Android에서 H/W Back Button을 눌렀을때 어떻게 이동 하는지 지정
  • firstRoute : 선언상 제일 처음에 있는 탭으로 이동
  • initialRoute : 최초 지정한 탭으로 이동
  • order : 탭을 선언한 순으로 이동
  • history : 이동한 히스토리 역순으로 이동

5. Nesting Navigator

• Navigator의 Screen을 Component가 아닌 다른 Navigator로 선언하는 것.
• 주로, Presentation을 다르게 선언하거나, 조건에 따라 Navigator의 분기가 필요할때 사용

5.1 주의점

1
A 네비게이터 → C 스크린
2
          → B 네비게이터 → D 스크린

• Navigator는 각자의 History를 가지고 있음
• Navigator에서 Screen Param은 전달되지 않음
• B Navigator에서 동작할수 없으면 A Navigator로 전달
• Navigator A의 이벤트를 Navigator B에서 받아 볼 수는 없음
  • focus, blur등. 필요한 경우 getParent로 찾아 등록해야 함
• Tab, Drawer의 하위 Navigator일 경우 Tab 또는 Drawer에 가려짐

6. DeepLink

1
https://abc.com/def
2

3
https://    =====> Scheme
4
abc.com/def =====> Path

• 특정 URL을 누르게 되면 지정한 화면으로 이동 하는것.
• 앱마다 유효한 scheme을 가지고 있는것

6.1 Universal Link, App Links

• 안드로이드에서 DeepLink는 App Links로 부르고,
• iOS에서 DeepLink는 Universal Link라고 부른다.
• 무단으로 Scheme을 빼앗아 가는 현상을 막기 위함
• 각각 플랫폼에서의 도메인 인증단계를 통과 해야함

7. Action

• 화면 이동에 대한 명령어를 담고 있는 Object
• e.g. 책에서 N 페이지로 이동, 이전페이지로 돌아가기 등

7.1 Action 구조

• type : 어떤 작업인지 나타내는 식별자
• payload : 추가 정보가 포함되어있음. (parameter)

7.2 CommonAction

• navigate : 특정 화면으로 이동하는 action
• reset : 현재 상태를 지정한 상태로 변경해주는 action
• goBack : 이전 히스토리로 이동해주는 action

7.3 StackAction

• push : 새로운 화면을 최상단에 넣는것
• pop : 현재 보이고 있는 화면을 꺼내는것

7.4 StackAction push vs CommonAction navigate

• push : 제일 마지막 화면으로 계속 넣는 Action
• navigate : 이전 Stack에 동일한 Screen을 가지고 있다면 pop액션도 수행

7.4 TabAction

• jumpTo : 탭간 이동 해야 할때 사용