리액트 네이티브 공부

리액트와 스타일 문법이 다른점

1) .클래스 선택자를 사용하지 않는다.

클래스가 아닌 객체를 사용한다. 고로 블록문 안에 ;를 쓰지 않고 ,로 구분한다.

2) 스타일 속성명은 카멜케이스를 적용한다.

ex) justify-content (X) / justifyContent (O)

3) px em rem 등 단위를 사용하지 않는다.

숫자만 쓰거나 %를 사용한다. 다른것이 더 있는 지는 더 봐야 함

리액트와 유사한 컴포넌트 몇가지

• TouchableHightlight
  - underlayColor : 터치시 하이라이트 되는 색상을 지정한다 (string)

• TouchableOpacity
  - activeOpacity : 터치시 적용되는 opacity 값을 지정한다 (number)
  

• Pressable
  button 과 유사
  이벤트 : onLongPress, onPress, onPressIn, onPressOut

• ImageBackground
  CSS의 background-image와 유사

• SafeAreaView
  보통 페이지의 최상위 래퍼 컴포넌트로 많이 사용
  현재 ios 11 버전 이상의 ios기기에만 적용
  만약 SafeAreaView를 적용하지 않는다면 기기의 둥근 코너나 카메라 노치와 같은 화면의 물리적인 부분과, 탐색 모음, 탭 바, 시간, 배터리 등 도구 모음 등의 뷰가 렌더링되는 내용과 겹치는 현상이 발생

• ScrollView
  RN은 웹처럼 자동으로 스크롤이 생기지 않는다. ScrollView로 감싸줘야만 스크롤이 생김
  - horizontal : 가로 스크롤로 변경. 기본값이 세로 스크롤이다. (boolean)
  - showsHorizontalScrollIndicator : 스크롤바 유무 (boolean)
  flex: 1이 기본 값

• FlatList
  ScrollView와 비슷하다. 목록이 길어지면 자동적으로 내부에 ScrollView가 적용됌
  데이터에 따라 목록형 스크롤을 만들어야 한다면 ScrollView 보다 좋다.
  header, footer, 데이터가 없을 경우 노출될 UI, 아래로 당겼을 때 refresh 기능 등을 props를 통해 설정 가능
  - data : 랜더를 위한 데이터. 필수값.
  - renderItem : 랜더링할 컴포넌트. 필수값.

• KeyboardAvodingView
  키보드가 화면 가릴때 사용하는 컴포넌트
  input 을 사용할때 필수적으로 사용해야 함
  행 별로 스타일 제어가 가능해 그리드 UI를 구현할 때도 매우 편리
  - behavior : height', 'position', 'padding' / android ios 둘다 지원

• ActiveIndicator
  로딩시 로딩 인디케이터를 제공하는 컴포넌트
  ex) <ActivityIndicator size="large" color="#0000ff" />
  size값이 large small 만 있어서 커스텀하기는 어렵다.

• Modal
  기존 레이아웃 위에 뜬다. css의 position: fixed; 와 비슷

Props

style props 이외에도 리액트 네이티브는 UI 렌더링에 영향을 주는 props들이 많다. 알아둬야 생고생 안한다.

• numberOfLines, elliipsizeMode
  elliipsizeMode는 "head", "middle", "tail", "clip" 네 가지 값을 가질 수 있다. clip은 ‘…’ 표시 없이 텍스트가 잘린다. tail이 기본 값.
  ex) <Text style={styles.text} numberOfLines={1} ellipsizeMode="head">

• contentContainerStyle
  ScrollView 사용할 때 컨텐츠의 내용의 길이가 원하는 사이즈에 부족하더라도 ScrollView 영역만큼의 영역을 확보해야할 경우가 있다.
  이 경우 ScrollView의 안쪽 View에 flex: 1이나 height: 100% 등을 선언하여도 영역을 확보할 수가 없다.
  실제 ScrollView를 사용할 때 ScrollView 내부에 접근할 수 없는 컨테이너가 생성되기 때문. 이 때 contentContainerStyle props를 이용해 이 컨테이너의 스타일을 부여할 수 있다.
  여기서 주의할 점은 contentContainerStyle props에 flesBasis를 0으로 설정하면 스크롤이 되지 않는 이슈가 있다.

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
	<View style={styles.empty}>
	</View>
</ScrollView>

• hitSlop
  터치할 때 터치영역을 실제 ui영역보다 더 확장할때 사용. 웹의 padding과 비슷하지만 레이아웃에 영향을 주지 않는다는 점이 다르다.

<TouchableOpacity hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}>
	<Text>버튼</Text>
</TouchableOpacity>

추천 오픈 소스 및 디버깅 툴

react-native-debugger https://github.com/jhen0409/react-native-debugger
까다로운 네이티브 UI 디버깅을 브라우저 개발자 도구와 유사한 방식으로 사용할 수 있습니다.
react-native-extended-stylesheet https://github.com/vitalets/react-native-extended-stylesheet
스타일에 글로벌 변수를 사용 가능하며 제약이 있지만 nth-child 등의 확장된 스타일 기능을 사용할 수 있습니다.
react-native-iphone-x-helper https://github.com/ptelad/react-native-iphone-x-helper
iPhone의 노치 영역과 관련된 변수와 메소드를 제공합니다. SafeAreaView만으로 컨트롤하기 힘든 노치 영역을 제어할 때 사용할 수 있습니다.
react-native-safe-area-view https://github.com/react-native-community/react-native-safe-area-view
SafeAreaView의 padding을 부분적으로 설정할 수 있습니다.

이 게시글은 제가 나중에 보기 위해 https://wit.nts-corp.com/2020/03/23/6014 의 블로그 글을 요약정리한 글입니다.