React Native로 iOS 및 Android 앱 개발하기

13 Oct 2023

javascript

React Native는 JavaScript와 React를 활용하여 iOS와 Android 앱을 동시에 개발할 수 있는 프레임워크입니다. 이를 사용하면 단일 코드베이스로 크로스 플랫폼 앱을 쉽게 구축할 수 있으며, 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있습니다.

시작하기 전에

React Native로 앱 개발을 시작하기 전에 몇 가지 사전 준비가 필요합니다. 먼저, 개발을 위해 Node.js와 npm(Node Package Manager)를 설치해야 합니다. 또한, iOS 개발을 위해서는 Xcode가 설치되어 있어야 하며, Android 개발을 위해서는 Android Studio와 Java 개발 환경이 필요합니다.

프로젝트 생성하기

React Native 프로젝트를 생성하기 위해서는 create-react-native-app 명령을 사용할 수 있습니다.

$ npx create-react-native-app my-app

위 명령을 실행하면 my-app이라는 이름의 새로운 폴더가 생성되고, 필요한 의존성 패키지가 자동으로 설치됩니다.

앱 개발하기

React Native 앱 개발을 시작하려면 my-app 폴더로 이동한 후, 앱의 주요 로직을 작성하면 됩니다. App.js 파일은 앱의 진입점 역할을 합니다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

위 예제에서는 기본적인 구조를 갖춘 View 컴포넌트가 하나 있으며, 이 안에 Text 컴포넌트가 있습니다. StyleSheet를 사용하여 컴포넌트의 스타일을 지정할 수 있습니다.

앱 실행하기

React Native 앱을 실행하기 위해서는 몇 가지 단계를 거쳐야 합니다.

iOS 시뮬레이터 실행: npm run ios 명령을 사용하여 iOS 시뮬레이터에서 앱을 실행합니다.
Android 에뮬레이터 또는 실제 기기 실행: npm run android 명령을 사용하여 Android 에뮬레이터나 실제 기기에서 앱을 실행합니다.

결과 확인하기

앱이 성공적으로 실행되면, iOS 및 Android 기기의 화면에 “Hello, React Native!”라는 문구를 포함한 기본 화면이 표시됩니다. 이제 앱을 개선하고 추가 기능을 구현할 수 있습니다.

결론

React Native를 사용하여 iOS와 Android 앱을 개발하는 방법에 대해 간략하게 알아보았습니다. React Native는 크로스 플랫폼 개발을 편리하게 해주고, 뛰어난 사용자 경험을 제공하는 강력한 도구입니다. 앱 개발을 시작해보고 새로운 가능성을 탐색해보세요!

References:

React Native 공식 문서: https://reactnative.dev/docs/getting-started
React Native Expo: https://expo.io/
React Native 커뮤니티: https://www.reactnative.com/