리액트 네이티브 프로젝트를 진행하면서 사용되는 기본적인 컴포넌트 사용법에 대해서
정리해보자

Components

react-native에서는 웹에서 사용하는 태그를 다음의 컴포넌트로 표현한다.

분류	컴포넌트	웹 태그	용도
Layout	<SafeAreaView>	<div>	안전영역에서 컨텐츠 렌더링 컨테이너
Layout	<View>	a non-scrolling <div>	레이아웃 컨테이너, 일부 터치이벤트, 스타일 지정
Basic	<Text>	<p>	텍스트 스타일, 일부 터치이벤트
Basic	<Image>	<img>	이미지 표시
Basic	<TextInput>	<input type='text'>	사용자의 입력값을 처리
Layout	<ScrollView>	<div>	일반 스크롤 컨테이너
Layout	<FlatList>		일반 컨테이너, 스크롤 시 렌더링 되는 특징
Layout	<SectionList>		스크롤 시 렌더링, 섹션이 나누어져 있음
UI	<Button>	<button>	클릭이벤트 처리
UI	<Switch>		boolean 입력값을 렌더링, 토글버튼

사용

react-native는 display: flex flex-direction: column이 기본값이다.

View

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

export defalut function App() =>{
	return <View 
    		style={{
        		borderColor: 'blue',
            	borderWidth: '1',}}>
            </View>
}

Text

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

type startMsg = {
	msg: string;
}
const styles = StyleSheet.create({
  container: {
     borderColor: 'blue',
     borderWidth: '1',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});
export defalut function App(msg:startMsg) =>{


	return <View style={styles.container}>
				<Text style={styles.item}>{msg}</Text>
            </View>
}

Image

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

export defalut function ImgList(){
	return <Image source={{uri: 'https://reactnative.dev/img/tiny_logo.png',}}>
    </Image>
}

ScrollView

부모요소를 기준으로 한 높이에서 스크롤을 제공함

..
export defalut function App(){
	return <ScrollView>
    	<Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </ScrollView>
}