리액트 네이티브 컴포넌트 사용의 두번째 이야기!

잘 정리해놓자

TextInput

사용자 입력값을 받는 컴포넌트로 <input type='text'>와 동일하게 사용 된다.
이벤트 핸들링도 가능하다.

import React from 'react';
import { TextInput } from 'react-native';

export defalut function App(){
	const [text, onChangeText] = React.useState('Useless Text');
 	const [number, onChangeNumber] = React.useState('');
    
	return(
    	<View>
        	<TextInput 
            	onChangeText={onChangeNumber}
        		value={number}
        		placeholder="useless placeholder"
                // 숫자만 입력받음
        		keyboardType="numeric"
            />
            <TextInput
              editable
              // TextArea
              multiline
              numberOfLines={4}
              maxLength={40}
              onChangeText={text => onChangeText(text)}
              value={value}
              style={{padding: 10}}
            />
        </View>
    )
}

TextInput에서 multiline속성으로 Textfield를 TextArea처럼 사용 할 수 있다.

ScrollView

한 번에 렌더링 되는 스크롤이 가능한 뷰 위젯
스크롤 뷰에는 하나의 위젯만 넣어야 한다!

<ScrollView>
	<Text>
		Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. 
	</Text>
</ScrollView>

FlatList

데이터 양이 많은 경우 스크롤에 의해서 렌더링되는 뷰 위젯
data와 renderItem을 필수 props로 받음

• data : 만들 리스트의 source
• renderItem : data의 값 하나하나를 render해주는 콜백함수
• keyExtractor : id를 대신 할 key
• getItemLayout : 동적크기를 사용 할 필요가 없는 경우 미리 크기를 지정
• initialNumToRender : 초기 랜더링 개수

const renderItem = useCallback(({item}) => <ListItem item={item} />, [])
const keyExtractor = useCallback((item) => item.id.toString(), [])
const getItemLayout = useCallback(
    (data, index) => ({
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index,
        index,    
    }), 
    []
);

<FlatList 
    data={DATA}
    renderItem={renderItem}
    keyExtractor={keyExtractor}
    getItemLayout={getItemLayout}
/>

렌더링 성능 향상을 위해서 renderItem과 keyExtreactor는 익명함수를 useCallback으로 사용하는 것이 좋다.

SectionList

섹션이 있는 스크롤에 의해 렌더링 되는 뷰 위젯
renderItem과 sections을 필수 props로 받음

• sections : flatList의 data와 같음 array형태의 source
• renderItem : sections의 값 하나하나를 render해주는 콜백함수

사용법은 FlatList와 동일함

Button

일반적인 클릭이벤트를 적용할 수 있는 버튼 위젯
title의 속성은 안드로이드에서 대문자로 표시 됨

<Button
  onPress={()=>{buttonClickEvent()}}
  title="inner Text"
  color="#841584"
  disabled
  accessibilityLabel="Learn more about this purple button"//웹 접근성을 위한 요소
/>

Switch

토글로 사용되는 버튼 위젯

• trackColor : 토글 on/off 배경색상(ios는 ios_backgroundColor로 false상태 색상 지정)
• thumbColor : 토글 버튼 원형 안쪽 색상
• onValueChange : value 상태에 대한 setState()
• value : 토글 상태가 on으로 전환(기본 값: false)

<Switch
  trackColor={{false: '#767577', true: '#81b0ff'}}
  thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
  ios_backgroundColor="#3e3e3e"
  onValueChange={toggleSwitch}
  value={isEnabled}
/>