React Native에서 Hello World 화면에 출력하는 방법

시스템에 React Native가 설치되면 프로젝트의 App.js 파일에 다음과 같은 기본 코드가 자동으로 생성됩니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
    render() {
        return (
            <View style = {styles.container}>
                <Text>Open up App.js to start working on your app!</Text>
                <Text>Changes you make will automatically reload.</Text>
                <Text>Shake your phone to open the developer menu.</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

이 기본 코드는 원하는 대로 자유롭게 수정할 수 있습니다. 이번 글에서는 앱 화면에 "Hello World"라는 텍스트를 표시하는 방법을 단계별로 살펴보겠습니다.

1. 필요한 컴포넌트 임포트하기

먼저 코드에 필요한 컴포넌트와 모듈을 가져와야 합니다. React 모듈을 아래와 같이 임포트합니다.

import React from 'react';

다음으로 "Hello World" 텍스트를 화면에 표시하는 데 사용할 컴포넌트들을 react-native에서 가져옵니다.

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

여기서는 StyleSheet, Text, View 세 가지 컴포넌트를 임포트했습니다. StyleSheet는 View와 Text 컴포넌트의 스타일을 지정할 때 사용하고, View는 부모 컴포넌트 역할을 하며 그 안에 Text 컴포넌트가 자식 요소로 배치됩니다.

2. App 클래스 구조 이해하기

App은 기본(default)으로 내보내지는 클래스입니다. 프로젝트를 실행하면 <Text> 컴포넌트에 작성된 텍스트가 실제 기기 화면에 나타납니다.

export default class App extends React.Component {
    render() {
        return (
            <View style = {styles.container}>
                <Text>Open up App.js to start working on your app!</Text>
                <Text>Changes you make will automatically reload.</Text>
                <Text>Shake your phone to open the developer menu.</Text>
            </View>
        );
    }
}

3. 텍스트를 Hello World로 변경하기

<Text> 컴포넌트 안의 문구를 다음과 같이 "Hello World"로 바꿔 줍니다.

export default class App extends React.Component {
    render() {
        return (
            <View style = {styles.container}>
                <Text>Hello World</Text>
            </View>
        );
    }
}

4. 스타일 적용하기

View 컴포넌트에는 style 속성이 추가되어 있으며 값은 styles.container입니다. props 값은 반드시 중괄호 {} 안에 작성해야 하므로 style={styles.container} 형태로 지정합니다.

스타일 객체는 StyleSheet.create() 메서드로 생성합니다. 컴포넌트에 적용할 모든 스타일은 StyleSheet.create() 내부에 정의할 수 있습니다. 현재는 View 컴포넌트에 적용되는 container 스타일이 정의되어 있으며, Text 컴포넌트 전용 스타일로 forText도 함께 추가했습니다.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    forText: {
        color: 'green',
        fontSize: '25px'
    }
});

5. 전체 코드

다음은 React Native로 모바일 화면에 "Hello World"를 표시하는 전체 코드입니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
    render() {
        return (
            <View style = {styles.container}><Text style={styles.forText}>Hello World</Text></View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    forText: {
        color: 'green',
        fontSize: '25px'
    }
});

코드를 저장하면 Metro 번들러가 변경 사항을 감지해 자동으로 새로고침하므로, 에뮬레이터나 연결된 실제 기기에서 곧바로 결과를 확인할 수 있습니다.

실행 결과