React Native를 시작한 이유

• 웹과 모바일 웹에서 더 나아가 앱을 제작해 보고 싶다
• 한 번의 개발로 크로스플랫폼 앱을 개발할 수 있다
• 요즘 인기가 많은 Flutter를 배워볼까 고민했지만 RN가 React를 사용하고, 커뮤니티가 커서 자료도 많고 안정적인 라이브러리가 많아 금방 배울 수 있다

React Native

메타에서 UI를 위해 만든 크로스플랫폼 JavaScript 라이브러리이다.

View

기본적인 UI 블록이다. 화면을 구성하는 하나의 작은 박스이다. 버튼 하나, 텍스트 한 줄도 view의 일종이다. view는 다른 view들을 포함할 수 있다.

Native Component

JavaScript로 리액트 컴포넌트를 만들면 런타임 시 플랫폼에 상응하는 view를 만든다. 이 리액트 컴포넌트를 Native Component라고 하며, 직접 구축할 수 있다.(RN Native Component 커뮤니티)

Core Component

RN이 기본적으로 제공하는 필수적인, ready-to-use한 Native Component 세트이다. 더 많은 RN Core Component

Navigation

RN공식문서에 따라 React-Navigation 라이브러리를 사용한다. 설치 가이드에 따라 설치한다. create-react-native-app을 사용해서 프로젝트를 생성했다면 설치 가이드에서 안내하는 다른 설정들은 이미 되어있을 것이다.

React Navigation

NavigationContainter

앱의 navigator 구조를 모두 감싸며 navigation tree의 최상위에 있어야 하는 컴포넌트이다. 보통 앱의 root 컴포넌트에서 렌더한다.

Stack Navigator, Native Stack Navigator

Stack Navigator은 JavaScript로 작성하는 네이게이터이고 기기의 기능을 이용하는 것이 아닌 JavaScript 기능을 이용하는 것이다.
Native Stack Navigator은 기기의 Native API를 사용한다.

Tab Navigation과 Stack Navigation

Screen끼리 이동할 수 있는 Tab Navigation, 제스처 또는 토글로 Nav를 Draw할 수 있는 Draw Navigation, Screen을 쌓는 Stack Navigation이 있다.

Navigation prop

각 screen 컴포넌트는 navigation prop이 자동으로 전달된다. RN공식문서에서 navigation prop이 제공하는 기능들을 확인할 수 있다.

각 Tab Navigation, Stack Navigation에서 Screen끼리 이동할 때에는 Navigation prop이 제공하는 navigate 함수에 Screen name을 전달하면 된다.
한 편 Tab Navigation의 Screen에서 Stack Navigation의 Screen으로 이동하고 싶은 경우(i.e. 모달을 띄워 페이지를 쌓는 경우) navigate 함수에 Navigation 이름과 {screen: Screen name}을 전달한다.

// 예시
Root Navigator
	Tabs Navigator
    	Movie Screen -> 클릭하면 navigate("Stack", {screen: "One"})
        Tv Screen
        Search Screen
    Stack Navigator
    	One Screen -> 클릭하면 navigate("Two")
        Two Screen -> 클릭하면 navigate("Three")
        Three Screen -> 클릭하면 navigate("Tabs", {screen: "Search"})