Final Project - (8) 2020_0205

저번까지는 Bottom Tab Navigator을 활용해서 각 탭에 해당하는 스크린을 만들고 탭을 구성하여 기본 스크린 구조를 만들었다.

 

이번에는 탭 중에서 메인 스크린에 해당하는 탭을 만드려고 한다. 

 

메인 스크린 탭에서 보여지는 스크린은 크게 두가지로 구성된다.  홈 스크린과 더보기 스크린이다.

 

메인스크린에서는 먼저 리뷰 레이팅 순으로 추천하는 매물 4개 정도를 보여주고, 각 매물 종류별로 4개정도 랜덤하게 보여줄 것이다. 그리고 각 매물에는 더보기 버튼이 있어 더보기를 누를 시에 해당하는 매물 전체를 보여줄 예정이다.

 

그래서 메인 스크린 탭에 해당하는 스크린 컴포넌트에 stack navigator를 만들어 위의 2개의 스크린을 쌓을려고 한다.

 

먼저 필요한 라이브러리를 받았다.

npm install react-navigation-stack

그리고 필요한 2개의 스크린(홈,더보기) 스크린 컴포넌트를 생성해주고 탭의 메인 스크린 컴포넌트에 createStackNavigator를 해서 만든 2개의 스크린을 넣어주었다. initialRouteName은 home으로 지정해서 처음에 탭을 누를 시에 홈 스크린이 보이도록 하였다.

 

이렇게 만들었고 이제 할 것은 각 스크린에 들어갈 컴포넌트들을 만드는 것이다. 스크린 컴포넌트를 만드는게 아니라 스크린 안에 들어갈 실질적인 컴포넌트들을 만들 것이다. 

 

먼저 홈 스크린에서 추천 매물을 보여주는 컴포넌트와 각 매물 종류별로 보여줄 컴포넌트를 분리해야 할 것 같아서 각각 컴포넌트를 만들어 주었다. (Recommend, HouseList)

 

그리고 이렇게 다 보여주려면 스크린이 스크롤이 되어야 할 것 같아서 스크롤 뷰를 사용하였다!!

 

import { View, ScrollView } from 'react-native';

 

react-native에서 Scrollview 를 import한 다음에 홈 스크린에 Scrollview 를 넣고 그 안에 아까 만들어준 Recommend와 HouseList 컴포넌트를 넣어주었다. 

 

그 다음은 이제 각 컴포넌트안에 실제로 매물을 보여줄 컴포넌트를 만들어야 하는데 Recommend와 HouseList 모두 매물을 카드형식으로 보여주려고 한다. 카드 컴포넌트를... 직접 한땀한땀 만들기에는 아직 내 실력이나 시간이 부족하기 때문에 컴포넌트 라이브러리를 사용하려고 한다.

 

https://www.codeinwp.com/blog/react-native-component-libraries/

15 React Native Component Libraries You Should Know in 2020

위 레퍼런스를 보면서 어떤 라이브러리를 쓸까 고민하다가 react-native-elements가 사용하기나 코드가 심플한 것 같아서 이 라이브러리를 설치하였다.

 

npm install react-native-elements

 

Recommend와 HouseList 둘에서 보여줄 카드는 크기 차이만 있고 같은 형식으로 보여줄 것 같아서 card 컴포넌트를 따로 만들어서 두 컴포넌트에 모두 사용하려고 한다. 

 

그래서 공통으로 쓸 카드 컴포넌트를 만들고 props를 통해 어떤 컴포넌트의 하위에서 렌더링 되는지를 확인하고 해당 컴포넌트에 해당하는 크기를 가지도록 만들었다. 그리고 각 컴포넌트 안에서 map을 활용해서 데이터 갯수만큼 렌더링 하도록해서 카드 컴포넌트를 넣어 주었다.

 

이때 이제 각 Recommend와 HouseList에서 매물들을 보여주는건 또 스크롤 뷰를 사용했는데 스크롤 뷰를 넣고 안에 카드 컴포넌트를 넣고 스크롤 뷰 옵션에 horizontal 옵션과 showsHorizontalScrollIndicator 옵션을 false로 주어서 스크롤 바가 안보이게 하고 가로로 스크롤 되도록 만들었다.

 

Main screen 탭에서 home screen과 더보기 버튼 클릭시 나오는 더보기 스크린

stack navigator로 만들어서 더보기 버튼을 클릭 시에 더보기 스크린으로 넘어가고 백버튼이 활성화 된 것을 알 수 있다. 여기에서 백버튼이나 뒤로가기를 하면 다시 홈 스크린으로 오게 된다.

 

일단 이렇게 메인 스크린의 홈 스크린만 구성을 하였고, 더보기의 경우에는 해당 매물 전체를 보여줘야하기 때문에 스크롤 뷰를 써야하는데 스크롤 뷰의 경우 보여줄 하위 컴포넌트들이 전부 렌더링 되어있는 상태이기 때문에 데이터가 많은 경우에는 성능에 문제가 생길 수 있다. 그래서 더보기 스크린에서는 flatlist를 활용해서 무한 스크롤(?) 느낌으로 나중에 만드려고 한다.