React Native #4 UI 개발하기

Explanation

오늘은 React Native로 UI를 만들어 보려 합니다. 처음에 ‘React Native가 React를 알면 도움이 된다’라는 이야기를 듣긴 했는데요, 막상 직접 사용해보니 깜짝..
정말 그냥 React를 import해서 사용하니까, 정말 친숙하게 다가갈 수 있었답니다.

역시 일단은 예제 소스를 만들어서 깃헙에 올렸습니다. https://github.com/falsy/react-native-example를 참고하시면 좋을 것 같습니다. 간단하게는 지난 글에서 설치한 디렉토리에서 ./App.js와 ./src/ 디렉토리만 복붙해서 보셔도 될 거 같아요.

우선 시작하기전에 만들어 본 UI를 실행하면 아래와 같은 UI가 출력된답니다.

뭐 되는건 없지만 나름 그럴싸하죠?ㅎ

일단 기본적으로 React가 익숙하시다면 구조가 전체적으로 아주 친숙하게 받아 들여진답니다. 똑같이 state와 props를 사용하고 필요한 라이브러리들도 npm을 통해서 불러와서 사용할 수 있고요. (redux도 똑같이 사용하실 수 있습니다.) 약간의 차이라면 리액트 네이티브는 DOM을 사용하지 않는 점? 그리고 css를 따로 사용하지 않는 점? 정도인거 같아요.
간략히 코드를 보자면

DOM 엘리먼트를 대신해서 ‘react-native’에서 View, Text, Image 뭐 이런 컴포넌트들을 사용할 수 있어요. DOM 엘리먼트와 비교하자면 View는 div의 느낌이고 Text는 p의 느낌 Image는 img의 느낌으로 사용할 수 있습니다. 스타일도 위 예 같은 경우에는 StyleSheet.create() 통해서 스타일을 정의하고 호출 했는데요.

이렇게도 사용할 수 있답니다. 그리고 스타일 요소들은 아주아주 css와 유사해서 따로 공부하지 않아도 그대로 사용하실 수 있습니다.

그러면 여기에서 알아두면 좋은 스타일 요소가 ‘flex’ 인거 같아요. 대략 이야기하면 절대값으로 지정되지 않은 영역에 대한 상대값으로 이야기할 수 있을 거 같아요. 위 예를 들자면 content의 flex: 1의 값은 너비는 100%를 의미하고 위 코드만으로는 알 수 없겠지만, DashboardHeader 컴포넌트 안에서 가지고 있는 100px과 DashboardFooter 컴포넌트 안에서 가지고 있는 78px를 제외한 높이의 영역을 가지게 됩니다. 그리고 만약에

이렇게 flex: 1의 값을 가진 2개의 View가 나란히 위치하면 똑같이 너비 100%와 높이는 아까 이야기한 100px 78px 제외한 나머지 영역을 1:1 비율 나누어서 갖게 된답니다.

그리고 다음으로

여기서 확인할 수 있는 부분은 Image는 저렇게 상대 경로로 require()를 source 속성으로 호출할 수 있다는 것과,

스타일 flexDirection: ‘row’ 로 하위 요소를 병렬? 정렬할 수 있고 alignItems: ‘center’ 속성으로 가운데 정렬을 할 수 있다 정도가 있는거 같습니다.
더 많은 스타일 속성들이 있겠지만 그것들은 조금만 검색해봐도 너무 잘 나와 있어서요. 아주 간단히 몇가지만 직접 해보면 어렵지 않게 UI를 쉽게 구성할 수 있습니다~