ReactNative Components

React Naive에서 제공하는 컴포넌트는 프로젝트 구동 시 각 운영체제에 맞는 컴포넌트로 변환된다

Web	React Native	Android	IOS
<div>	<View>	android.View	UIView
<input>	<TextInput>	EditText	UITextField
…	…	…	…

핵심 컴포넌트

아래 컴포넌트는 기본적으로 ‘react-native’에서 제공 됨.
import { ... } from 'react-native'
전체 컴포넌트는 공식 문서 참고

<View>

• 콘텐츠를 담는 상자의 역할
• web의 div 태그와 비슷하나 내부에 직접적으로 텍스트를 입력 할 수 없다.

<View>Hello World</View> // ❌Error!

<SafeAreaView>

• 컨텐츠가 모바일 화면 상단의 노치와 겹치지 않도록 조절

<SafeAreaView>
	...
</SafeAreaView>

<Text>

• 텍스트를 표시하기 위한 컴포넌트.
• 모바일에서는 대부분의 컴포넌트가 내부에 직접 텍스트를 입력할 수 없으므로, 텍스트 입력 시 Text컴포넌트와 함께 사용해야 한다.

<View>
	<Text>Hello World</Text> 
</View>

<Button>

• 버튼 컴포넌트
• 기존 JSX코드와 달리 내부에 직접 컨텐츠를 넣는 대신 title 속성을 사용
• 스타일링을 지원하지 않음

<Button>Click!</Button> // ❌Error! 내부에 직접 컨텐츠를 넣을 수 없음
<Button title="Click!" style={{color: "red"}} /> // ❌Error! 스타일 속성 미지원

<Button title="Click!" onPress={() => console.log("click!")} /> // ✅Correct!

• 일반적으로 스타일링이 편리한 커스텀 버튼 컴포넌트를 생성하여 사용. /<Pressable\> 참고

export default function Button({onPress, title}) {
  return (
    <Pressable style={{padding: 6}} onPress={onPress}>
      <Text style={{color: "#000"}}>{title}</Text>
    </Pressable>);
}

<TextInput>

• 사용자에게 값을 입력받기위한 input 컴포넌트
• onChangeText() : 매개변수로 input value값 제공

<TextInput 
	placeholder="text me!" 
    onChangeText={(value) => console.log(value)} 
/>

• input type 정의 시 keyboardType으로 입력 제어

      <TextInput
        keyboardType="number-pad"
        autoCorrect={false} // 자동수정
      />

• props
  • keyboardType
    • 입력 가능한 키패드 타입 정의
    • default | number-pad |decimal-pad | numeric | email-address | phone-pad
  • autoCapitalize
    • 자동 대문자 표시
    • characters (모든 문자) | words (단어의 첫 글자) | sentences (문장의 첫 글자) | none
  • autoCorrect
    • 자동 수정
    • boolean

<Image>

• 이미지 표시
• props
  - source : 이미지 경로 설정. 로컬 이미지 사용 시 require()함수를 사용해야 함.

<Image source={require("../assets/image.png")} />

<ImageBackground>

• 이미지를 배경으로 사용할 수 있음
• <View> 와 <Image> 태그의 조합으로 만들어짐.
• props
  • source : 이미지 경로
  • style : 이미지의 컨테이너 (View태그)에 적용 할 스타일
  • imageStyle : 이미지에 적용 할 스타일

 <ImageBackground
  source={require("./background.png")}
  style={styles.screen} // View컴포넌트에 적용
  imageStyle={styles.backgroundImage} // Image컴포넌트에 적용
  resizeMode="cover"
>
	...
</ImageBackground>

// ImageBackground 내부 코드. View와 Image의 조합
// 스타일이 각각 전달 됨.
<View style={props.style}>
  <Image style={props.imageStyle} />
</View>

<ScrollView>

• 스크롤 가능한 영역을 생성
• 높이값을 직접 지정할 수 없다. <ScrollView\>를 감싸는 <View\> 컴포넌트를 활용해 높이값을 설정한다.
• 영역 내의 모든 컨텐츠가 한번에 렌더링 됨
  ⇒ 컨텐츠의 양이 많아지면 성능 저하
  ⇒ 콘텐츠의 양이 제한적인 경우에 적합
• 콘텐츠의 양에 제한이 없는 리스트 등을 렌더링 할 경우 <FlatList\> 사용 권장

// ❌
<ScrollView style={{height: "300px"}}>...</ScrollView>

// ✅
<View style={{height: "300px"}}>
	<ScrollView>
		...
	</ScrollView>
</View>

<FlatList>

• 스크롤 가능한 영역을 생성
• 뷰포트 내의 컨텐츠만 우선 렌더링.
  ⇒ 컨텐츠의 양과 상관없이 일정한 양의 컨텐츠만 렌더링 됨
  ⇒ 컨텐츠의 양이 동적으로 늘어날 수 있는 리스트 렌더링 시 적합.
• props
  • data
    • required true
    • type = itemT[]
    • 렌더링 할 항목의 배열
  • renderItem
    • required true
    • type = ({item: itemT, index: number, separators: Object}): JSX.Element
    • data에서 항목을 가져와 렌더링. 매개변수로 data 항목을 포함한 메타데이터 제공
  • keyExtractor
    • required false
    • type = (item: itemT, index: number) : string | number
    • 각 항목의 key 값이 될 데이터를 추출/생성. (기본값 item.key)

const itemData = [
	{
		id: 1,
		text: 'A'
	},
	{
		id: 2,
		text: 'B'
	},
	{
		id: 3,
		text: 'C'
	},
]

<View style={{height: "300px"}}>
	<FlatList 
		data={itemData}
		renderItem={item => (
			// 항목에 key 속성을 전달 할 필요가 없음.
			<View>{item.text}</View>
		)}
		keyExtractor={item => item.id} // 기본값 : item.key
	/>
</View>

<Pressable>

• 선택(클릭)가능한 영역 생성
• style 속성에 함수 전달 시, 매개변수로 터치 상태와 관련한 정보를 제공

<Pressable 
	onPress={() => console.log("Clicked!")}
	style={({pressed}) => ( // pressed: boolean => 컴포넌트가 선택(pressed)상태일 때 true
		{backgroundColor: pressed ? "red" : "blue"}
	)}
>
	<Text>Click Me!</Text>
</Pressable>

<Modal>

• 메인 화면 위에 오버레이되는 모달 컴포넌트 제공
• props
  • visible : 모달의 오픈상태를 관리 / boolean
  • animationType : 모달 오픈/클로즈 시 애니메이션 설정 / none | fade | slide

const [modalVisible, setModalVisible] = useState(false)

<Modal 
	visible={modalVisible}
	animationType="slide"
>
	...
</Modal>

<KeyboardAvoidingView>

• 키보드가 열려도 해당 컴포넌트 내부의 요소에 액세스 할 수 있음.

• 가로모드 등 화면의 높이가 낮을 때, 화면이 가상키보드에 가리는 경우 활용 할 수 있음(IOS)

• props

  • behavior : 키보드에 반응하는 방식을 지정
    • height,position, padding

<KeyboardAvoidingView behavior={'positon'}>
   ...
</KeyboardAvoidingView>

<ActivityIndicator>

• 사용중인 플랫폼에 따라 적절한 로딩 아이콘 제공

<View>
	<ActivityIndicator size="large" color="#fff" />
</View>