모바일 앱 개발 초보자를 위한 리액트 네이티브 소개와 간단한 시작 가이드

리액트 네이티브(React Native)는 모바일 앱 개발을 위한 인기 있는 프레임워크입니다.

본 포스팅에서는 비개발자들도 쉽게 리액트 네이티브를 사용하여 개발을 시작하는 방법을 알아보겠습니다!

1. 리액트 네이티브란?

리액트 네이티브는 페이스북에서 개발한 오픈소스 프레임워크입니다.
이 프레임워크를 사용하면 JavaScript를 이용하여 여러 플랫폼(iOS, Android)의 애플리케이션을 동시에 개발할 수 있어 효율적이며, 그 성능도 네이티브 애플리케이션에 근접합니다.

2. 개발 환경 설정

개발을 시작하기 전에 필요한 프로그램을 설치해야 합니다.

1. Node.js 설치 : https://nodejs.org/ 에서 가장 최신의 LTS 버전을 설치하기

2. Visual Studio Code 설치 : https://code.visualstudio.com/ 에서 개발도구 설치하기

3. (선택사항) Expo 설치: http://expo.io/learn에 따라 Expo CLI을 설치하기

프로그램 설치가 완료되면, 다음 단계로 넘어갑시다.

3. 첫 리액트 네이티브 앱 생성

새로운 앱을 생성하기 위해서 터미널에 명령 프롬프트를 열어 아래의 명령어를 입력하여 실행합니다.

npx create-expo-app MyFirstApp
cd MyfirstApp

MyFirstApp의 이름을 가진 앱을 생성합니다.

MyFirstApp의 폴더로 들어간 후 작업을 진행합니다.

4. 앱 실행하기

1. 어플을 실행하여 웹으로 확인하기 위해 터미널에 다음 명령어를 입력합니다.

npx expo start

2. 웹으로 확인하기 위해서는 따로 설치를 하여 확인이 가능하기 때문에 "Ctrl + C"를 눌러 실행을 종료한 후

터미널에 출력된 하얀 문장을 복사하여 터미널에 다시 입력합니다.

npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

3. 웹 서버 다운로드가 완료되면 다시 명령어를 터미널에 입력하여 앱을 실행해 봅시다.

npx expo start

5. 기본 화면 구성

MyFirstApp 폴더에 들어가 App.js 파일을 열어 내용을 수정해 봅시다.

이곳에서 앱의 구조와 디자인을 변경할 수 있습니다.

아래 소스 코드를 참조하여 기본 화면을 구성해 봅시다.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>간단한 리액트 네이티브 앱!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

"Ctrl + S"를 눌러 위 코드를 저장하여 앱의 변경된 내용을 확인해 봅시다.

6. 리액트 네이티브 컴포넌트 사용하기

리액트 네이티브는 다양한 기능을 구성하고 있는 컴포넌트를 제공합니다.

리액트 네이티브에서 기본적으로 구성하고 있는 컴포넌트는 아래의 링크를 통해 리액트 네이티브(React native) 공식 사이트에서 확인해서 사용이 가능합니다.

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat

reactnative.dev

한번, 버튼(Button) 컴포넌트를 사용해 간단한 기능을 추가해 봅시다.

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

const App = () => {
  const onPressButton = () => {
    alert('버튼이 눌렸습니다!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>간단한 리액트 네이티브 앱!</Text>
      <TouchableOpacity style={styles.button} onPress={onPressButton}>
        <Text style={styles.buttonText}>버튼</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  // ...
  button: {
    backgroundColor: '#4C8EF7',
    padding: 15,
    borderRadius: 8,
    marginTop: 20,
  },
  buttonText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#',
  },
});

export default App;

여러분들은 어렵지 않게 이제 뛰어난 개발자가 될 수 있는 첫걸음을 내디뎠습니다!!

지금까지 간단하게 리액트 네이티브를 사용하여 앱 개발을 시작하는 방법을 설명하였습니다.

더 자세한 내용은 리액트 네이티브 공식 문서(https://reactnative.dev/docs/getting-started)에서도 찾아볼 수 있습니다~

주아네 개발 블로그