RN _ Core Components

친철한 RN 튜토리얼 가이드!

https://www.reactnative.express

React Native Express

---

RN의 특징(vs react)

- 모든 레이아웃 배치는 flex를 기본으로!

- 이 때 flex 속성은 기본값이 row.

- 쌓임 맥락 → 코드 작성 위치가 레이아웃에도 영향 미침.

(태그 내부 = Z 축 쌓임, 태그 하단 = Y축 쌓임 으로 생각하면 될 듯)

 

Core Components

1. View

웹의 div에 해당하는 컴포넌트. RN의 가장 기본적인 컨테이너 역할.

스타일과 자식 요소들의 레이아웃 배치에 사용됨.

 

2. Layout

flex 속성 3대장을 통해 자식 요소의 배치를 제어.

 

3. Text

웹과 달리 모든 텍스트는 <Text/> 컴포넌트 내부에 위치.

 

4. Image

img 파일 import시 디바이스 크기에 맞는 적절 사이즈(1x, 2x, 3x 등)로 변환.

 

5. Button

기본 타입의 버튼 컴포넌트. 편리하지만 커스텀 어려움.

 

6. Touchables

→ 따라서 Touchables 컴포넌트 이용!

Button과 마찬가지로 onPress 속성을 지원 + 커스텀 스타일링 가능.

(그 이외에도 onPress, onPressOut 등의 속성을 통해 커스텀 애니메이션 설정 가능)

 

즉 Touchables는 누를 수 있는 View라 생각!

 

6-1) Touchable Opacity

사라질 때 - fade out, 나타날 때 fade in 되는 컴포넌트.

activeOpacity 속성을 통해 클릭 발생 시 opacity를 조정할 수 있다.

 

6-2) TouchableHighlight

누를 때 하이라이트 효과(배경색 변경)가 발생하는 컴포넌트.

underlayColor 속성을 통해 누르고 있을 때 적용할 색상을 지정할 수 있다.

 

7. Scroll View

콘텐츠 스크롤(가로 세로)을 위한 컴포넌트.

풀 스크린보다, 작은 양의 콘텐츠를 스크롤하는데 적합(양이 많을 경우 FlatList 사용을 권장)

 

가장 상위 컴포넌트에 ScrollView이기 때문에 화면에서 넘치는 컴포넌트들이 스크롤

+ 가로 ScrollView를 통해 중간 가로 스크롤 구현

 

만약 최상위 컴포넌트가 일반 View라면?

→ 화면에서 흘러넘치는 요소들이 존재함에도 스크롤 발생 X 

+ 멀쩡히 잘 있던 가로형 스크롤도 작동 X !

 

8. Lists

ScrollView와 유사, 요소들을 재사용하고 불필요한 리 렌더링을 막음.

→ React의 react-virtualized 처럼 이용자에게 아직 보이지 않는 영역의 렌더링을 미룬다!

 

8-1) FlatList

FlatList는 많은 양의 콘텐츠를 스크롤해야 하는 상황에 유용!

scrollView와 유사하지만 앞서 말한 바와 같이 더 향상된 성능을 제공한다.

 

사용법은? 기본적으로 많은 양의 데이터들을 하나하나 꺼내 보여준다 고 생각하면 되는데 → map()이 생각나는 순간!

이때 하나하나 보여줄 데이터 === renderItem 속성 에 해당한다.

keyExtractor 속성은? 당연히 map() 함수 생성 시 key값을 지정해준 것과 유사! (리 랜더링 시 효율 향상에 기여할 테다)

 

8-2) SectionList

SectionList는 FlatList와 유사하지만, 각 데이터 그룹마다 헤더 섹션을 만들 수 있다.

sections 속성에 배열로 돌릴 데이터를 지정,

renderItem으로 data라는 key의 array 속 item 하나하나를 react 요소로 반환했으며,

(default 값이므로..! {item.text}는 자동적으로 data 속성의 값의 array를 mapping 해 반환한다! 와)

renderSectionHeader를 통해 각 리스트의 header를 나타낼 수 있다!

 

만약 data마다 다른 속성을 적용하고 싶다면?

renderItem 속성을 각각 정의해주면 된다!