React Native 앱 제작기 #2 | React Hooks(훅스)& Navigation(네비게이션)

 

안녕하세요! 바울랩 ‘오현규’ 연구원 입니다.

저번 게시글에서 리액트 네이티브 개발 환경을 구성하는 단계까지 완료했는데요,

이번에는 리액트 Hooks와 화면 간 이동을 해주는 Navigation을 다뤄보겠습니다.

Hooks?

React는 기본적으로 'state'와 'props'로 상태관리를 하는데요( 쉽게 말해 데이터를 주고 받는방법!)

상태 관리는 주로 컴포넌트(화면)의 라이프 사이클에서 관리가 되었습니다.

라이프 사이클에 대해서 잠깐 알아볼게요,

1. constructor ( 컴포넌트가 처음 만들어질때 실행)

2. componentWillMount ( 컴포넌트가 DOM 위에 만들어지기 전에 실행 )

3. render ( 컴포넌트 렌더링 )

4. componentDidMount ( 컴포넌트가 생성 된 후 실행 ) - 주로 이 구간에서 이벤트 실행

   이렇게 여러 라이프 사이클을 사용해 수 년간 리액트 개발을 거친 결과, 문제점을 발견 했는데요!

개발 중 수 많은 컴포넌트들이 만들어지며,

로직이 여러 LifeCycle에 흩어지고 밀접하게 결합되면서 컴포넌트 재사용을 못하고

중복된 컴포넌트들이 무수히 많이 생기게 되는 문제가 생기는 것이죠..

 

이런 문제를 해결하기위해 FaceBook에서 권고한 방법이 함수형 방식인 Hooks입니다!

componentWillMount, componentDidMount 등 라이프 사이클에 의존할 일 없이 'useState'를 통해 상태관리를 할 수 있습니다. (가독성도 좋네요!)

Hooks 기본 구조   https://ko.reactjs.org/docs/hooks-intro.html

이벤트 처리는 'useEffect'를 사용하면 됩니다!

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

useState / useEffect를 적극 활용해서 뷰를 구성해나가면 되겠습니다!

이제 'react-navigation'를 사용한 화면 간 이동 방법을 다뤄볼게요.

업데이트가 자주 있는 라이브러리기 때문에 링크를 타고 직접 가이드를 보며 설치해주세요!

우선 제작한 앱의 공통적인 뎁스를 보여드릴게요.

1.카테고리 메뉴

2.강좌 리스트 뷰

3. 강좌 재생 뷰

강의 영상을 제공하는 앱이기 때문에

위에 3가지의 공통적인 뷰를 가질 수 있겠습니다.

 

그렇다면?

카테고리 선택 시 파라미터를 넘겨받으면 하나의 뷰로 각 각 다른 정보를 제공할 수 있겠죠?

영상 정보들은 'YouTube Data API'를 사용해 받아올 겁니다!

화면 구성 단계입니다.

1.홈 화면

앱 실행 후 가장 처음 보이는 화면을 보시면,

카테고리 뷰로 가는 아이콘, 라이선스 정보 뷰로 가는 아이콘 2개를 보실 수 있습니다.
그렇다면 우리는 화면 전환을 위해서
앱의 최상단에 카테고리 메뉴와 라이선스 뷰의 스택을 쌓아주면 됩니다!

 

MainContainer.js

 

 

자세한 코드는 https://github.com/rbrbrb7290/JejuCodingBaseCamp.git

2. 카테고리 메뉴

다음은 드로워 메뉴를 구성하는 코드입니다.

 

LectureDrawerNavigator.js

 

 

 

여기까지, stack-navigation, drawer-navigation을 사용해 화면 구성하는 법을 알아봤습니다.

 

다음 게시글에는 YouTube Data API를 사용해 유튜브 채널에 있는 강좌 리스트와 강좌 재생 뷰를

제작하는 방법을 다루겠습니다!