이번에는 빌리집의 메인 스크린인 Home 스크린을 만들어 주었다.
Home 스크린은 bottom tab navigator 중 첫번째 tab인데 여기에 stack navigator로 다음과 같은 스크린을 쌓아주었다.
- Home screen
- More List screen
- Detail screen
- Review screen
- Review posting screen
이 중에서 홈 스크린과 More list screen을 만들어 주었다.
Home Screen
홈 스크린은 메인 문구, 추천 매물 카드 (4개), 매물 종류별 카드 (각 4개) 그리고 각 종류에 대한 모든 매물을 볼 수 있는 스크린으로 넘어가는 버튼으로 구성되어 있다.
우선 전체적으로 ScreenView를 적용하였고, Home screen 진입 시에 필요한 데이터 (추천매물, 각 종류별 매물) 를 useEffect hook으로 componentDidMount 동작을 하게하여 서버로부터 받아오도록 하였다. 그리고 받아온 데이터를 각 하위 컴포넌트에 종류에 맞게 props로 전달하여주었다. 이때 isReady라는 state를 만들어서 Home screen 전체를 조건부 렌더링하게 만들어서 data를 받아온 다음에 실제 Home screen을 보여주게 하였고, data를 받아오기전에는 react native의 ActivityIndicator를 렌더링하게 해서 로딩이 되는 동작을 구현하였다.
1. 메인 문구
~님 무슨 집을 찾고 계신가요? 이 문구인데 여기에서 로그인 한 유저에 따라 회원가입 시 입력한 이름이 나오도록 해주었다.
로그인 시에 JWT와 함께 유저의 이름을 같이 응답으로 받고, asyncstorage에 JWT와 마찬가지로 저장이 된다. 그리고 홈 스크린 진입 시에 비동기 처리로 유저 이름을 꺼내와서 렌더링 되도록 해주었다.
2. 추천매물 / 각 종류별 매물
우선 가로로 매물 카드를 넘길 수 있도록 ScrollView에 horizontal 옵션을 사용하였다. 스크롤 바가 생기지 않도록 showsHorizontalScrollIndicator 옵션을 false로 주었다. 카드컴포넌트를 따로 만들어주어 스크롤뷰에서 각 컴포넌트를 배열의 map으로 렌더링하게 하였다.
카드 컴포넌트의 경우, 추천매물과 각 종류별 매물에서 렌더링되는 모습이 다르다.
우선 카드의 크기가 다르고 카드에 표시되는 정보가 다르다. 하지만 다르다고 따로 만들어서 쓰기에는 비효율적이기 때문에 어디에서 렌더링되냐에 따라 같은 카드컴포넌트가 다르게 렌더링 되도록 구현하였다.
RecommendOrHouses 라는 props를 카드컴포넌트에 넘겨주게해서 추천매물에서 렌더링 되는 카드의 경우에는 props로 'R'이라는 텍스트를 받게 된다. 그래서 카드 컴포넌트 내부에서 삼항 연산자를 통해 props 값이 'R'일 경우, 아닐 경우로 나뉘어서 컴포넌트의 크기를 조절하고 조건부 렌더링을 통해 표시되는 정보가 다르도록 해주었다.
그리고 카드 컴포넌트를 Home screen에서 터치할 경우, 카드의 상세 스크린으로 navigate 되도록 만들어주기 위해서 카드 컴포넌트 전체를 TouchableOpacity로 감싸주었다.
카드 컴포넌트에서 보여지는 것은 우선 매물의 이미지와 매물의 대한 정보이다. 카드컴포넌트 자체는 react native elements의 Card 컴포넌트를 이용하여 만들었다.
이미지의 경우에는 나중에 호스팅 기능을 만들 때 설명하겠지만, 유저가 호스팅 시에 메인 이미지로 원하는 이미지 하나를 설정할 수가 있다. 그래서 카드컴포넌트에서 이미지를 렌더링할 시에 이미지의 fileName을 확인해서 메인이미지일 경우에는 메인이미지를 렌더링하고, 아니면 이미지 배열 중에 첫번째를 렌더링하도록 하였다.
그리고 이미지를 받아와서 렌더링하기 전까지, 로딩되고 있다는 것을 표시하기 위해서 PlaceholderContent에 ActivityIndicator를 렌더링하도록 해주었다.
매물의 정보의 경우에는 추천매물과 종류별 매물 카드 둘다 매물의 타이틀과 description 정보는 동일하게 보여주고, 추천매물에서는 추가적으로 매물의 type과 평점을 같이 보여준다.
그래서 이것을 위에서처럼 조건부 렌더링을 통해서 보여주고, 크기 등도 다르게 렌더링 되도록 하였다.
타이틀과 description의 경우, 영역을 넘어갈 경우 ellipsizeMode 옵션을 tail로 설정하여 넘어가는 부분이 ...으로 표시되도록 하였다.
More List Screen
홈 스크린에서 각 매물 종류부분에 More라는 버튼을 만들어 버튼 터치 시에 각 매물의 전체 리스트가 나오는 스크린으로 navigate 되도록 하였다.
More List 스크린으로 진입하면 Home과 마찬가지로 useEffect hook으로 매물의 전체 리스트를 받아오게 된다. 그리고 이 데이터를 props로 전달해준다.
More List 스크린의 경우에는 스크롤뷰가 아닌 FlatList를 사용하여 구현하였다. 그 이유는 스크롤뷰로 데이터들을 렌더링하게 되는 경우, 스크롤뷰에 전체 매물이 한번에 전부 렌더링이 된다. 매물의 갯수가 많지 않으면 크게 영향이 없지만 매물이 100개, 1000개 이렇게 많아질 경우에는 성능에 많은 영향을 주게 된다.
FlatList를 이용하면 이 문제를 해결할 수 있다. FlatList는 데이터를 일단 전부 받아오고 처음에 보이는 부분의 매물만 먼저 렌더링이 된다. 그리고 스크롤을 아래로 내리면 그 이후에 매물이 렌더링 되는 것이다. 따라서 처음부터 전부 렌더링을 하지 않기 때문에 많은 매물이라도 렌더링이 잘 되도록 할 수 있다.
여기서 카드 컴포넌트의 경우에는 추천매물과 비슷하게 만들었지만 매물의 주소도 추가적으로 보여질수 있도록 하였다.
사실 비슷한 구조이기 때문에 위에서 사용한 카드컴포넌트를 또 재사용할 수 있었지만, 이것을 고려하지 못하고 삼항연산자로 이미 만들어 버려서, 복붙으로 여기서만 사용하는 카드를 다시 만들어주었다... 지금 생각해보니 매우 비효율적인 것 같다.
이렇게 빌리집 프로젝트의 메인 스크린인 홈스크린과 More 스크린을 만들고 컴포넌트들을 만들어 주었다. 프로젝트의 메인 스크린인 만큼 잘 만들려고 노력하였다. 그래서 스타일과 디자인을 많이 신경썼는데, 비슷한 서비스인 에어비앤비를 많이 참고해서 비슷하게 만들었다. 메인 컬러가 보라색이라서 버튼이나 평점의 별 색깔 등을 보라색으로 주었다.
'Project Devlog > BillyZip' 카테고리의 다른 글
| Final Project - (13) 2020_0210 (0) | 2020.02.10 |
|---|---|
| Final Project - (11) 2020_0208 (0) | 2020.02.08 |
| Final Project - (10) 2020_0207 (0) | 2020.02.07 |
| Final Project - (9) 2020_0206 (0) | 2020.02.06 |
| Final Project - (8) 2020_0205 (0) | 2020.02.05 |
댓글