---
tags: rn
---

https://runebook.dev/ko/docs/react_native/accessibility

# RN의 컴포넌트들

## 코어 컴포넌트

### View

[공식 문서](https://reactnative.dev/docs/view)

뷰(View)는 RN에서 가장 기본이 되는 컴포넌트입니다. 뷰는 flexbox, style을 제공하고 일부의 touch handling과 accessibility를 제어합니다.

뷰는 responder props를 처리합니다. 이는 PressEvent를 포함합니다.

### Text

[공식 문서](https://reactnative.dev/docs/text)

텍스트(Text)는 텍스트 요소를 화면에 보여주며 nesting과 touch handling을 제공합니다.

nesting된 텍스트는 마치 `span`과 같이 동작합니다.

텍스트는 컨테이너 요소로 동작합니다. 즉 레이아웃에 있어 고유한 속성을 가집니다.

### Image

[공식 문서](https://reactnative.dev/docs/image)

RN의 이미지(Image)는 로컬이미지, 네트워크 이미지, 카메라(내장) 이미지, base64이미지 타입등 다양한 이미지를 보여줍니다.

RN의 이미지는 크기가 없는 경우 먼저 빈 이미지를 호출하고 이후 크기를 연산하므로 UI의 이동이 일어날 수 있습니다. 따라서 크기의 설정을 권장합니다.

주요 props는 아래와 같습니다.

**props**

defaultSource(imageSource): loading전 보여줄 컨텐츠

onError(func): load error 이벤트 핸들러

onLayout(func): 레이아웃 변경 이벤트 핸들러

onLoad(func): load 완료(성공)에 대한 이벤트 핸들러

onLoadEnd(func): load에 대한 이벤트 핸들러(성공/실패 여부 관계없음)

onLoadStart(func): load시작시 발생하는 이벤트

resizeMode(string): web의 리사이즈와 유사하게 동작

source(imageSource): 로드할 이미지 리소스

몇몇 API는 유용하게 사용됩니다.

**API**

prefetch: 디스크 캐시에 이미지를 저장하여 사용합니다. 작업에 대한 프로미스를 반환합니다.

queryCache: 디스크 캐시에 접근하여 이미지를 가져옵니다.

getSize: 이미지의 크기를 반환합니다. 리소스 크기를 미리 받아오므로 lazyloading에서 근거로 활용할 수 도 있습니다.

### StyleSheet

[공식 문서](https://reactnative.dev/docs/stylesheet)

스타일 시트(Stylesheet)는 css와 유사한 스타일 인터페이스입니다. 스타일 요소는 Pascal case를 따라 object로 선언하여 stylesheet에서 생성합니다.

예를 들어 아래와 같이 선언합니다.

const page = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  text: {
    fontSize: 20,
  },
});

<View style={page.container} />

### ScrollView

[공식 문서](https://reactnative.dev/docs/scrollview)

스크롤뷰(ScrollView)는 스크롤되는 뷰 입니다. 반드시 높이를 포함해야합니다.

스크롤뷰는 자식요소를 한번에 랜더링하므로 성능적인 부분을 List와 함께 표현하려면 플랫 리스트(FlatList)를 사용하는것을 권장합니다.

스크롤뷰는 StickyHeaderComponent속성을 가지는데 이는 css의 `display: sticky`와 유사하게 동작하며 stickyHeaderIndices와 반드시 사용되어야합니다.

### TextInput

[공식 문서](https://reactnative.dev/docs/textinput)

텍스트인풋(TextInput)은 텍스트 입력을 위한 컴포넌트입니다. `onChangeText`에 의해 change event를 처리합니다. 주요 props는 아래와 같습니다.

**Props**

maxLength(number): 최대 길이값

multiline(boolean): 멀티 라인 여부

numberOfLines(number): 멀티라인 길이

onChangeText(func): 변경 이벤트 핸들러

value(string): 입력값 제어 변수

editable(boolean): 값 변경 가능 여부

keyboardType(string): 보여질 키보드 타입

onBlur/onFocus(func): 포커싱 이벤트 관련 핸들러

### Button

버튼(Button)은 유저와의 첫번째 인터렉션 창구입니다. 버튼은 최소한의 커스터마이즈만을 제공하므로 버튼 대신 Touchable Component(TouchableOpacity 등)가 유리한 선택일 수 있습니다.

버튼은 반드시 onPress(터치 이벤트 핸들러)와 title(보여주는 텍스트 요소)를 반드시 포함해야합니다.

accessibility control을 사용할 수 있습니다.

주요 props는 아래와 같습니다.

**props**

color(string): 버튼의 색을 지정합니다

disabled(boolean): 버튼 가/불 여부

### Switch

스위치(Switch)는 on/off를 표시하는 효과적인 방법입니다. 두 상태중 하나를 선택하는 표시를 할 수 있습니다.

주요 props는 아래와 같습니다.

**props**

value(boolean): 상태 값

onValueChange(func): 값 변경에 대한 이벤트 핸들러

thumbColor(string): 버튼 색

trackColor({ false: string, true: string }): 상태에 따른 색 변경 지정

disabled(boolean): 가/불 여부

### FlatList

플랫 리스트는 아래 스펙을 지원합니다.

수평/수직 모드, header/footer, scroll loading, 새로고침

const renderItem = ({ item }) => (
  <Text>{item}</Text>
);

<FlatList
  data={DATA}
  renderImte={renderItem}
  keyExtractor={item => item.id}
/>

데이터와 데이터의 아이템(item)울 랜더링할 컴포넌트 함수를 받아서 동작합니다.

`data`는 보여줄 데이터 리스트를 받습니다.

`renderItem`은 `data`로 받은 데이터를 랜더링하는 함수인터페이스 입니다.

renderItem({ item, index, separators });

데이터는 `item` 파라미터로 넘어옵니다. `index`는 아이템의 리스트 인덱스, `separtors`는 리스트의 구분선에 대한 옵션을 포함합니다.

아래는 주요 props입니다.

**props**

ItemSeparatorComponent(component): 구분자 대신 위치할 컴포넌트

ListEmptyComponent(component): 목록이 비어있을 때 대치될 컴포넌트

ListFooterComponent(component): 리스트 최하단 푸터

ListHeaderComponent(component): 리스트 최상단 해더

horizontal(boolean): 수직/수평 여부

keyExtractor(func): key값 반환 함수, reconcilation 레벨 개념

ExtraData(any): refresh 트리거 중 data에 포함되지 않는 dependency

## 참고 자료

[flexbox](https://reactnative.dev/docs/flexbox)

[accessibility](https://reactnative.dev/docs/accessibility)

[PressEvent](https://reactnative.dev/docs/pressevent)