내장 컴포넌트
리액트(React)에서 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각을 의미합니다.
리엑트 네이티브 컴포넌트
리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, 리액트의 개념을 기반으로 하면서 모바일에 특화된 컴포넌트를 제공합니다. 기본적인 리액트 네이티브 컴포넌트는 아래와 같습니다.
1. View
View
는 리액트 네이티브(React Native)에서 가장 기본적인 컴포넌트 중 하나로, UI의 빌딩 블록(building block) 역할을 합니다. 웹의 <div>
태그나 iOS의 UIView
, Android의 ViewGroup
과 유사한 역할을 합니다.
주요 특징
-
컨테이너:
View
는 다른 컴포넌트들을 묶어 주는 컨테이너 역할을 할 수 있습니다. 따라서 레이아웃을 구성하는 데 중요한 역할을 합니다. -
스타일링:
View
컴포넌트는style
prop을 통해 스타일링될 수 있습니다. 여기에는 배경색, 패딩, 마진, 테두리 등의 스타일 속성을 적용할 수 있습니다. -
터치 이벤트:
View
는 사용자의 터치 이벤트에 반응할 수 있습니다. 예를 들면, 사용자의 탭(tap)이나 스와이프(swipe) 등의 동작을 감지하고 해당 동작에 응답할 수 있습니다. -
접근성:
View
는 접근성 기능도 지원합니다. 예를 들면, 스크린 리더(screen reader)와 같은 보조 기술에 대한 정보를 제공하는 역할을 합니다. -
레이아웃: 리액트 네이티브는 Flexbox 레이아웃을 사용합니다.
View
컴포넌트는 이 Flexbox 레이아웃의 모든 속성을 지원하므로, 복잡한 UI 레이아웃을 구성하는 데에도 활용될 수 있습니다.
사용 예제
import React from "react";
import { View, Text } from "react-native";
const ViewBoxesWithColorAndText = () => {
return (
<View
style={{
flexDirection: "row",
height: 100,
padding: 20,
}}
>
<View style={{ backgroundColor: "blue", flex: 0.3 }} />
<View style={{ backgroundColor: "red", flex: 0.5 }} />
<Text>Hello World!</Text>
</View>
);
};
export default ViewBoxesWithColorAndText;
위에 주어진 코드의 주요 특징을 설명하면 다음과 같습니다.
-
Imports:
React
는 React 라이브러리를 가져오기 위한 것입니다.View
와Text
는 React Native 라이브러리에서 가져온 UI 구성 요소입니다.View
는 주로 컨테이너 역할을 하며,Text
는 텍스트를 표시합니다.
-
ViewBoxesWithColorAndText 컴포넌트:
- 이 컴포넌트는 3개의 자식 요소를 포함하는
View
로 구성되어 있습니다.
- 이 컴포넌트는 3개의 자식 요소를 포함하는
-
외부 View 스타일:
flexDirection: 'row'
: 자식 요소들이 가로 방향으로 나열됩니다.height: 100
: 이 View의 높이는 100 픽셀입니다.padding: 20
: 이 View의 모든 방향에 20 픽셀의 패딩이 추가됩니다.
-
자식 요소들:
- 첫 번째
View
: 파란색 배경색을 가지며, 부모View
의 너비의 30%를 차지합니다. (flex: 0.3
) - 두 번째
View
: 빨간색 배경색을 가지며, 부모View
의 너비의 50%를 차지합니다. (flex: 0.5
) Text
: "Hello World!"라는 텍스트를 표시합니다.
- 첫 번째
-
Export:
export default ViewBoxesWithColorAndText;
를 통해 다른 파일에서 이 컴포넌트를 가져와 사용할 수 있습니다.
위의 설명을 바탕으로, 이 컴포넌트를 화면에 표시하면, 두 개의 서로 다른 색상의 박스와 "Hello World!"라는 텍스트가 가로 방향으로 나열된 모습을 볼 수 있을 것입니다.
사진을 클릭하면 예시 코드를 실행해볼 수 있습니다.
2. Text
Text
는 리액트 네이티브(React Native)의 주요 컴포넌트 중 하나로, 스크린에 텍스트를 표시하기 위해 사용됩니다. 웹의 <span>
또는 <p>
태그와 유사한 역할을 합니다.
주요 특징
-
텍스트 표시:
Text
컴포넌트는 사용자에게 텍스트 정보를 표시하는 데 사용됩니다. -
스타일링:
Text
컴포넌트 역시style
prop을 통해 스타일링될 수 있습니다. 폰트 크기, 폰트 색상, 가중치 (두껍게), 텍스트 정렬 방식 등의 다양한 텍스트 스타일링 속성을 지원합니다. -
중첩 가능:
Text
컴포넌트는 중첩될 수 있습니다, 즉, 한Text
컴포넌트 내부에 또 다른Text
컴포넌트를 포함할 수 있습니다. 이를 통해 일부 텍스트 세그먼트에 다른 스타일을 적용하는 등의 복잡한 스타일링이 가능합니다. -
터치 이벤트:
Text
컴포넌트에도 터치 이벤트를 적용할 수 있습니다. 이를 통해 텍스트를 탭했을 때의 동작 등을 정의할 수 있습니다. -
텍스트 특화 속성: 텍스트의 줄 간격(line height), 글자 간격(letter spacing), 텍스트 자르기(ellipsis) 등의 텍스트 특화 속성을 설정할 수 있습니다.
사용 예제
import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';
const TextInANest = () => {
const [titleText, setTitleText] = useState("Bird's Nest");
const bodyText = 'This is not really a bird nest.';
const onPressTitle = () => {
setTitleText("Bird's Nest [pressed]");
};
return (
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={onPressTitle}>
{titleText}
{'\n'}
{'\n'}
</Text>
<Text numberOfLines={5}>{bodyText}</Text>
</Text>
);
};
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default TextInANest;
사진을 클릭하면 예시 코드를 실행해볼 수 있습니다.
코드 설명
-
Imports
import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';- React와 React의
useState
hook을 가져옵니다. - React Native의
Text
컴포넌트와StyleSheet
객체를 가져옵니다.
- React와 React의
-
TextInANest 컴포넌트 이 컴포넌트는 2개의 텍스트 요소를 포함하고 있습니다.
-
useState
를 사용해titleText
상태 변수와 그 값을 설정하는setTitleText
함수를 초기화합니다. 초기 값은"Bird's Nest"
입니다. -
bodyText
는 상수 변수로, 값이"This is not really a bird nest."
로 설정되어 있습니다. -
onPressTitle
함수는 titleText의 값을"Bird's Nest [pressed]"
로 변경합니다. 이 함수는 제목 텍스트를 탭 할 때 호출됩니다. -
return
문에서, 상위Text
컴포넌트 내부에 두 개의Text
컴포넌트를 중첩하여 렌더링합니다. 중첩된 구조를 통해 스타일 및 다른 속성을 상속받을 수 있습니다. -
첫 번째 중첩된
Text
컴포넌트는 제목을 표시하며, 누르면onPressTitle
함수가 호출됩니다. -
두 번째 중첩된
Text
컴포넌트는bodyText
의 값을 표시합니다.numberOfLines
속성을 통해 최대 5줄까지만 표시하도록 설정되어 있습니다.
-
-
Styles
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});StyleSheet.create
메소드를 사용하여 스타일을 정의합니다.baseText
스타일은Cochin
글꼴을 사용하여 텍스트를 표시합니다.titleText
스타일은 글꼴 크기를 20으로 설정하고 볼드체로 표시합니다.
-
Export
export default TextInANest;
TextInANest
컴포넌트를 기본 내보내기로 설정하여 다른 파일에서 임포트하여 사용할 수 있게 합니다.
3. Image
Image
는 React Native에서 이미지를 표시하기 위한 기본 컴포넌트입니다. 이 컴포넌트를 사용하면 앱 내에 포함된 정적 이미지 뿐만 아니라 외부 URL에서 가져온 이미지도 표시할 수 있습니다.
주요 특징
-
소스 타입:
Image
컴포넌트는 다양한 타입의 이미지 소스를 지원합니다. 이는require
를 통해 로컬에서 가져온 이미지 또는 웹 URL을 통해 가져온 이미지일 수 있습니다. -
스타일링:
Image
도style
prop을 통해 스타일링될 수 있습니다. 이를 통해 이미지의 크기, 둥근 모서리, 테두리 등의 스타일을 설정할 수 있습니다. -
리사이징:
resizeMode
prop을 사용하여 이미지의 리사이징 방식을 지정할 수 있습니다. 예를 들면, 'cover', 'contain', 'stretch', 'repeat', 'center' 등의 값이 있습니다. -
이벤트 처리:
Image
컴포넌트는 이미지 로드 완료, 로드 실패와 같은 여러 이벤트에 대한 콜백을 제공합니다. -
페이드 인 효과:
fadeDuration
prop을 통해 이미지가 화면에 표시될 때의 페이드 인 효과의 지속 시간을 설정할 수 있습니다 (Android 전용).
사용 예제
import React from 'react';
import {View, Image, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
paddingTop: 50
},
tinyLogo: {
width: 50,
height: 50,
},
});
const DisplayAnImage = () => {
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
</View>
);
};
export default DisplayAnImage;
사진을 클릭하면 예시 코드를 실행해볼 수 있습니다.
해당 코드는 React Native를 사용하여 이미지를 화면에 표시하는 간단한 컴포넌트를 정의합니다.
-
Imports
import React from 'react';
import {View, Image, StyleSheet} from 'react-native';- React 라이브러리를 가져옵니다.
- React Native에서
View
,Image
, 그리고StyleSheet
를 가져옵니다.
-
Styles
const styles = StyleSheet.create({
container: {
paddingTop: 50
},
tinyLogo: {
width: 50,
height: 50,
},
});StyleSheet.create
를 사용하여 스타일을 정의합니다.container
는 상단에 50의 패딩을 갖습니다.tinyLogo
는 50x50의 크기로 이미지를 표시합니다.
-
DisplayAnImage 컴포넌트
View
컴포넌트 내부에 두 개의Image
컴포넌트를 포함하고 있습니다.- 첫 번째
Image
컴포넌트는 로컬에서 이미지를 가져와 화면에 표시합니다. 여기서는@expo/snack-static/react-native-logo.png
경로의 이미지를 사용합니다. - 두 번째
Image
컴포넌트는 웹 URL에서 이미지를 가져와 화면에 표시합니다. 여기서는https://reactnative.dev/img/tiny_logo.png
URL의 이미지를 사용합니다.
-
Export
export default DisplayAnImage;
DisplayAnImage
컴포넌트를 기본 내보내기로 설정하여 다른 파일에서 임포트하여 사용할 수 있게 합니다.
4. TextInput
TextInput
은 React Native에서 사용자의 텍스트 입력을 받아들이기 위한 기본 컴포넌트입니다. 웹의 <input type="text">
요소와 유사하게 동작하며, 사용자가 텍스트를 입력하거나 수정할 수 있게 해줍니다.
주요 특징
-
텍스트 입력: 사용자가 키보드를 통해 텍스트를 입력할 수 있습니다.
-
스타일링:
TextInput
도style
prop을 사용하여 스타일링될 수 있습니다. 이를 통해 입력 필드의 크기, 테두리, 폰트 스타일 등을 지정할 수 있습니다. -
플레이스홀더:
placeholder
prop을 통해 사용자에게 입력 예시나 가이드를 제공할 수 있습니다. -
값 제어:
value
prop을 통해 현재의 입력 값에 접근하거나 변경할 수 있습니다. 또한,onChangeText
prop을 사용하여 텍스트가 변경될 때 콜백 함수를 실행할 수 있습니다. -
키보드 타입:
keyboardType
prop을 사용하여 특정 타입의 키보드 레이아웃을 표시하도록 요청할 수 있습니다 (예: 숫자만 입력하는 경우 'numeric'). -
다중 행:
multiline
prop을 통해 여러 줄의 텍스트 입력을 허용할 수 있습니다. -
이벤트 처리: 여러 가지 이벤트에 대한 콜백 함수를 제공합니다. 예를 들어,
onFocus
,onBlur
,onSubmitEditing
등이 있습니다.
사용 예제
import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';
const TextInputExample = () => {
const [text, onChangeText] = React.useState('Useless Text');
const [number, onChangeNumber] = React.useState('');
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={onChangeText}
value={text}
/>
<TextInput
style={styles.input}
onChangeText={onChangeNumber}
value={number}
placeholder="useless placeholder"
keyboardType="numeric"
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default TextInputExample;
사진을 클릭하면 예시 코드를 실행해볼 수 있습니다.
이 코드는 React Native를 사용하여 두 개의 텍스트 입력 상자를 화면에 표시하는 컴포넌트를 정의합니다.
-
Imports
import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';- React와 React Native의
SafeAreaView
,StyleSheet
,TextInput
컴포넌트를 가져옵니다.
- React와 React Native의
-
TextInputExample 컴포넌트
useState
를 사용하여 텍스트 상태 변수text
와 숫자 상태 변수number
를 초기화합니다.text
는 초기값으로 'Useless Text'를 가지고 있습니다.onChangeText
는text
상태를 업데이트하고,onChangeNumber
는number
상태를 업데이트합니다.SafeAreaView
내부에 두 개의TextInput
컴포넌트를 반환합니다.- 첫 번째
TextInput
은text
값을 표시하며, 값이 변경될 때onChangeText
함수를 호출하여 상태를 업데이트합니다. - 두 번째
TextInput
은number
값을 표시하며, 값이 변경될 때onChangeNumber
함수를 호출하여 상태를 업데이트합니다. 또한 숫자 키보드를 표시하기 위해keyboardType
속성을 "numeric"으로 설정하고, 입력 상자에 아무 값도 없을 때 "useless placeholder"라는 텍스트를 표시하기 위해placeholder
속성을 사용합니다.
- 첫 번째
-
Styles
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});StyleSheet.create
메소드를 사용하여 입력 상자의 스타일을 정의합니다. 입력 상자는 높이 40, 여백 12, 테두리 두께 1, 패딩 10을 가집니다.
-
Export
export default TextInputExample;
TextInputExample
컴포넌트를 기본 내보내기로 설정하여 다른 파일에서 임포트하여 사용할 수 있게 합니다.
5. ScrollView
ScrollView
는 React Native에서 콘텐츠가 화면 크기를 넘어서면 스크롤하여 보여주기 위한 기본 컴포넌트입니다. 일반적으로 화면의 크기보다 큰 컴포넌트나 리스트를 스크롤하여 볼 수 있게 해줍니다.
주요 특징
-
스크롤 가능한 컨테이너: 화면에 표시할 수 있는 범위를 넘는 콘텐츠를 감싸서 사용자가 스크롤하여 전체 내용을 볼 수 있게 합니다.
-
방향: 기본적으로 세로로 스크롤됩니다. 하지만
horizontal
prop을true
로 설정하면 가로로 스크롤되게 할 수 있습니다. -
통합 스타일링:
ScrollView
도style
prop을 사용하여 스타일링할 수 있습니다. -
이벤트 처리: 여러 스크롤 이벤트에 대한 콜백 함수를 제공합니다. 예를 들면,
onScroll
,onMomentumScrollStart
,onMomentumScrollEnd
등이 있습니다. -
리프레시 컨트롤:
refreshControl
prop을 통해 pull-to-refresh 기능을 구현할 수 있습니다. -
퍼포먼스: 대용량의 리스트나 그리드를 표시할 때는
ScrollView
보다는FlatList
나SectionList
같은 최적화된 컴포넌트를 사용하는 것이 좋습니다.
사용 예제
import React from 'react';
import {
StyleSheet,
Text,
SafeAreaView,
ScrollView,
StatusBar,
} from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;
사진을 클릭하면 예시 코드를 실행해볼 수 있습니다.
이 코드는 React Native를 사용하여 스크롤 가능한 텍스트 영역을 표시하는 간단한 애플리케이션을 설명합니다.
-
Imports
import React from 'react';
import {
StyleSheet,
Text,
SafeAreaView,
ScrollView,
StatusBar,
} from 'react-native';- 필요한 모듈과 컴포넌트들, 즉
React
,StyleSheet
,Text
,SafeAreaView
,ScrollView
, 그리고StatusBar
를 React Native에서 가져옵니다.
- 필요한 모듈과 컴포넌트들, 즉
-
App 컴포넌트
SafeAreaView
는 애플리케이션의 메인 컨테이너 역할을 합니다. 이 컨테이너는 디바이스의 상태 표시줄 높이만큼 위에 패딩을 가집니다.ScrollView
는 스크롤이 가능한 영역을 제공합니다. 이 예제에서는ScrollView
내부에Text
컴포넌트를 넣어 스크롤이 가능한 텍스트 영역을 만듭니다.Text
컴포넌트는Lorem ipsum...
과 같은 샘플 텍스트를 표시합니다.
-
Styles
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});StyleSheet.create
를 사용해 스타일을 정의합니다.container
스타일은 전체 화면을 차지하게 설정되며(flex: 1
), 상태 표시줄의 높이만큼 위쪽 패딩이 적용됩니다.scrollView
스타일은 배경색을 'pink'로 설정하고, 양쪽 가로 마진을 20으로 설정합니다.text
스타일은 텍스트의 글꼴 크기를 42로 설정합니다.
-
Export
export default App;
App
컴포넌트를 기본 내보내기로 설정하여 다른 파일에서 임포트하여 사용할 수 있게 합니다.
6. Button
Button
은 React Native에서 기본적으로 제공되는 사용자 인터페이스 컴포넌트 중 하나로, 사용자가 터치할 수 있는 버튼 요소를 나타냅니다.
주요 특징
-
간단한 인터페이스:
Button
은 간단한 API를 제공하며, 주로 제목과 이벤트 핸들러를 설정하는 데 사용됩니다. -
플랫폼에 따른 스타일링:
Button
은 기본적으로 현재 플랫폼(iOS, Android 등)의 네이티브 스타일링을 따릅니다. -
제한된 커스터마이징:
Button
컴포넌트는 커스터마이징 옵션이 제한적입니다. 더 많은 스타일링이나 기능을 원한다면, 다른 컴포넌트나 서드파티 라이브러리를 검토하는 것이 좋습니다.
사용 예제
import React from 'react';
import {
StyleSheet,
Button,
View,
SafeAreaView,
Text,
Alert,
} from 'react-native';
const Separator = () => <View style={styles.separator} />;
const App = () => (
<SafeAreaView style={styles.container}>
<View>
<Text style={styles.title}>
The title and onPress handler are required. It is recommended to set
accessibilityLabel to help make your app usable by everyone.
</Text>
<Button
title="Press me"
onPress={() => Alert.alert('Simple Button pressed')}
/>
</View>
<Separator />
<View>
<Text style={styles.title}>
Adjust the color in a way that looks standard on each platform. On iOS,
the color prop controls the color of the text. On Android, the color
adjusts the background color of the button.
</Text>
<Button
title="Press me"
color="#f194ff"
onPress={() => Alert.alert('Button with adjusted color pressed')}
/>
</View>
<Separator />
<View>
<Text style={styles.title}>
All interaction for the component are disabled.
</Text>
<Button
title="Press me"
disabled
onPress={() => Alert.alert('Cannot press this one')}
/>
</View>
<Separator />
<View>
<Text style={styles.title}>
This layout strategy lets the title define the width of the button.
</Text>
<View style={styles.fixToText}>
<Button
title="Left button"
onPress={() => Alert.alert('Left button pressed')}
/>
<Button
title="Right button"
onPress={() => Alert.alert('Right button pressed')}
/>
</View>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
marginHorizontal: 16,
},
title: {
textAlign: 'center',
marginVertical: 8,
},
fixToText: {
flexDirection: 'row',
justifyContent: 'space-between',
},
separator: {
marginVertical: 8,
borderBottomColor: '#737373',
borderBottomWidth: StyleSheet.hairlineWidth,
},
});
export default App;
사진을 클릭하면 예시 코드를 실행해볼 수 있습니다.
이 코드는 React Native를 사용하여 다양한 속성을 갖는 버튼들을 화면에 표시하는 애플리케이션을 설명합니다.
-
Imports
import React from 'react';
import {
StyleSheet,
Button,
View,
SafeAreaView,
Text,
Alert,
} from 'react-native';필요한 모듈과 컴포넌트들을 React Native에서 가져옵니다.
-
Separator 컴포넌트
const Separator = () => <View style={styles.separator} />;