React - Navigation 용어 정리

<개요>

아직 어떤 내용이 어떻게 작용하는지 알지도 못하는 상태에서 글 공부하듯 외우는 것은 의미가 없다고 본다. 

그래서 현재까지 이해한 내용만 정리하고 나머지 개념들은 직접 해보면서 감을 잡고 정리하도록 하겠다. 

 

1. 네비게이터, screen 구조도 

2. React 내의 생명주기 (간략하게)

이것 이외의 더 많은 과정들이 있지만, 일단 강의에서 배운 주요 내용들로만 생명주기를 정리 하겠다. 

이외의 과정들을 보고 싶은 사람들은 다른 블로그를 참고하기 바란다. 

(1) Constructor

컴포넌트 생성자 매소드,  컴포넌트가 생성되면 가장 먼저 실행되는 매소드 이다.

(2) render

적힌 컴포넌트들을 화면에 그리는 것을 render라고 한다.

(3) componentDidMount

render를 끝낸 후 (즉 화면이 그려진 후)에 처음이자 마지막으로 실행되는 매소드이다. 

해당 매소드 내에는 앱이 막 시작했을 때 일어나야 하는 동작들을 기술해놓는다. 

(4) componentWilUnmount

컴포넌트가 화면에서 사라지기 전에 처음이자 마지막으로 실행되는 매소드이다. 

동적 할당 해놨던 것들 회수하거나, Dom에 등록해놓은 이벤트를 제거하는 등에 작업을 매소드 내부에 구현해놓는다. 

 

3. Navigator 종류

(1) stack navigator

Stack 자료 구조의 원리로 화면 이동을 구현한 Navigator.

A 화면에서 B화면을 열면, A화면 위에 B화면이 올려져서 열린다. (Stack 구조와 같다.)

Stack이 선입후출, 즉 맨 마지막에 쌓인 것이 먼저 나가는 것처럼. 화면 위에 제일 마지막에 쌓인 것이 제일 먼저 사라진다. 

(2) Drawer Navigator

슬라이드를 통해서 이동할 Screen을 나타내느 Navigator 이다. 

(3) Tab Navigator

Tab 형태로 지금 보고 싶은 화면을 고르는 Navigator이다.

이것도 stack Navigator와 마찬가지로 다른 화면을 골랐다고 해서 

기존 화면이 unMount 되는 것이 아니다. 

어떤 탭이 골라졌는지는 tabPress나 focus 등의 이벤트 발생 시 동작하는 속성을 이용하여 구현한다. 

 

4. 라우팅이란? 

사용자가 요청한 URl에 맞는 페이지를 보여주는 것을 라우팅이라고 한다. 

<Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸는 요소이다. 사용자가 요청한 URl과 맞는 라우트를 내부에서 골라서 단 하나만 랜더링해주는 역할을 한다. 

<Route> 컴포넌트는 <Routes>에 의해 골라지면 랜더링되어 화면에 보여진다. 

<Route>의 속성인 path에는 대응하는 URL이, element에는 구현될 컴포넌트가 들어간다.