React Native 개념 정리

Native의 고유한 규칙들

• div 대신 View 사용
• 모든 텍스트는 Text 컴포넌트 안에 넣어주기 (그러려면 react-native 라이브러리에서 import를 해줘야 한다)
• 모든 CSS 속성을 RN에서 다 쓸 수는 없지만 98%정도는 쓸 수 있다.
• 자동완성 기능을 이용하기 위해 StyleSheet.create기능을 사용하여 스타일 object를 만들어 직접 style 속성으로 넘겨줄 수 있다. 
• 브라우저가 아니기 때문에, Status-bar와 같은 일부 컴포넌트는 무조건 화면에 렌더링되는 것이 아니라, 운영체제와 통신하기 위한 컴포넌트로 존재한다! (무조건 return해준다고 화면에 다 차례대로 표시되는 것은 아니다. 브라우저랑 다른 것을 명심하자)

 

React Native Package들

과거에 React Native에서 제공했던 컴포넌트, API들이 현재는 제공되지 않는 경우가 많다. 버그도 많고 모든 컴포넌트를 제공하는 것이 어렵다고 판단되어 지원범위를 줄였고 현재 공식 문서를 보면 core component의 개수가 그렇게 많지 않다.  

 

Component와 API의 차이

• Component : 화면에 렌더링할 요소 (return 태그 안에 넣을 것)
• API : JS 코드. 운영체제와 소통하는 요소들

 

Third Party Package

RN 팀에서 공식적으로 지원하지 않는 기능들은 이제 유저들이 개발한 Community에서 직접 가져와 사용해야 한다. 유지보수를 유저에게 맡겨야 한다는 단점이 있기에, Expo 팀에서 개발해둔 많은 컴포넌트를 Expo SDK에서 가져다 쓸 수도 있다.

 

 

Layout System

기본적으로 모든  View 컴포넌트는 웹에서 사용하던 flexbox방식을 따른다. grid나 block 방식은 없다. flexbox 방식을 기본적으로 따르고, 디폴트 flex-direction은 column이다. (웹은 row였다)

그리고, 대부분의 경우 너비, 높이에 기반하여 레이아웃을 구성하지 않는다. 반응형 디자인을 고려할 때, width, height 속성은 레이아웃을 잡을 때 쓰지 않는다. RN 방식으로는, flex size를 줘서  지정한다. (비율 시스템)

 

부모에게 flex 값을 주고, 자식에게 얼마만큼의 비율을 차지할 것인지 알려주면 된다. (style 속성)

 

ScrollView

브라우저와 다르게 앱은 컴포넌트가 많다고 자동 스크롤이 되지 않는다. 스크롤이 되도록 하는 View를 RN에서 제공하는데 바로 ScrollView다. (https://reactnative.dev/docs/scrollview) 

공식 문서를 정말 열심히 뜯어보면서 사용하면 된다. 일단 flex:1은 필요가 없다. 얘는 화면 전체를 먹어야 하니까. 친절하게 나와있는 공식문서 설명을 보면서 따라가보자. 많이 사용할법한 속성으로는 하나하나의 요소를 page단위로 만드는 pagingEnable도 있고, style 속성이 먹지 않기 때문에 스크롤뷰에서만 가능한 contentContainerStyle prop이 있을 것이다. 그리고 현재 기기의 가로 크기를 받아오려면 Dimensions과 관련된 API를 사용하면 된다.

 

Touchable

버튼이 눌렸음을 가시적으로 보여줄 수 있도록 유저가 터치했을 때 피드백을 주는 요소들이 몇가지 있다.

• TouchableOpacity : 클릭했을 때 약간 투명해짐
• TouchableHighlight : 클릭했을 때 배경색을 변경
• TouchableWithoutFeedback : 클릭한 여부만 받아오고 UI의 변화는 없음

이 중 버튼에 관련된 부분은 투명도를 건드리는 컴포넌트로 감싸주는 것이 대부분이다. 공식 문서를 살펴보면 이 컴포넌트보다 더 나은 요소를 pressable로 소개하는데 조금 더 세분화된 속성을 제공한다. 가령 hitSlope 옵션을 사용하여 더 넓은 영역까지 클릭이 되도록 설정해줄 수도 있다. (기존 웹에서는 버튼에 padding을 넣어서 해결했듯이)