React Native 핵심 구성 요소 완벽 정리: View부터 TextInput까지

React Native는 한 번의 코드 작성으로 Android와 iOS 양쪽 플랫폼에서 동작하는 앱을 만들 수 있는 크로스 플랫폼 프레임워크입니다. 그 핵심에는 각 플랫폼의 네이티브 뷰로 자동 변환되는 기본 구성 요소들이 있습니다. 이 글에서는 React Native에서 가장 중요한 핵심 구성 요소들을 살펴보고, 각 요소가 실제 기기나 웹 브라우저에서 어떻게 매핑되는지 정리해 드립니다.

React Native 핵심 구성 요소 비교표

React Native의 주요 핵심 구성 요소는 다음과 같습니다.

핵심 구성 요소 사용 예제

다음은 <View>, <Text>, <Image>, <ScrollView>, <TextInput>을 함께 활용한 실제 동작 예제입니다.

이 컴포넌트들을 사용하려면 먼저 react-native에서 아래와 같이 임포트해야 합니다.

import { View, Text, Image, ScrollView, TextInput } from 'react-native';

<View> 컴포넌트는 주로 텍스트, 버튼, 이미지 등을 담는 역할을 하며, 아래와 같이 사용합니다.

<View>
    <Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
    <Image
       source={{
          uri: 'https://www.tutorialspoint.com/react_native/images/logo.png',
       }}
       style={{ width: 311, height: 91 }}
    />
</View>

위 코드에는 <Text>와 <Image> 컴포넌트가 포함되어 있습니다. <ScrollView>는 부모 컴포넌트처럼 동작하며, View, Text, Image, Button 등 React Native의 다양한 컴포넌트들을 감싸서 스크롤 가능한 영역을 만들어 줍니다.

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
    return (
      <ScrollView>
          <Text style={{ padding:"10%", color:"green", "fontSize":"25" }}>Welcome to TutorialsPoints!</Text>
          <View>
            <Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
            <Image
               source={{
                  uri:'https://www.tutorialspoint.com/react_native/images/logo.png',
               }}
               style={{ width: 311, height: 91 }}
            />
        </View>
        <TextInput
          style={{
            height: 40,
            borderColor: 'black',
            borderWidth: 1
          }}
          defaultValue="Type something here"
        />
      </ScrollView>
    );
}
export default App;

실행 결과

위 예제를 실행하면 ScrollView 안에 환영 텍스트, 이미지가 담긴 View, 그리고 텍스트를 입력할 수 있는 TextInput이 순서대로 배치된 화면을 확인할 수 있습니다.