React Native 장점, 설치 방법 (npx create-expo-app)

by

이번 글에서는 React Native의 장점과 설치 방법에 대해 알아보겠습니다. React Native를 처음 시작하시는 분들은 주로 Expo를 쓰는데 npx create-expo-app를 통해 쉽게 프로젝트 설치가 가능합니다.

React Native란?

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다. React Native는 네이티브 개발의 가장 좋은 부분을 사용자 인터페이스 구축을 위한 동급 최고의 JavaScript 라이브러리인 React와 결합합니다. 리액트 네이티브를 사용하면 Android와 iOS 앱을 동시에 개발할 수 있기 때문에 더욱 높은 생산성을 가져갈 수 있는데요.

React Native는 최근 굉장히 핫한 프레임워크 중 하나입니다. 기존에는 안드로이드와 iOS 개발을 위해 안드로이드 개발자와 iOS 개발자를 따로 두고 제작을 했는데요. React Native를 쓰면 하나의 코드로 AOS, iOS 둘 다 개발이 가능하니 정말 편리하지 않을 수가 없죠. 

안드로이드는 코틀린이나 자바, iOS는 swift, objective-c를 사용했다면 React Native는 자바 스크립트만을 사용하여 모든 플랫폼의 앱을 만들 수 있습니다. 보통 하이브리드 개발이라고 하죠. 프로그래밍 언어를 아이폰, 안드로이드 따로 쓰지않고 JavaScrip와 같은 하나의 언어로 통일해서 사용하는 것입니다. React Native는 통일된 언어를 사용하여 기능을 만들고 이것을 아이폰과 안드로이드에서 각각 읽을 수 있도록 해줍니다.

또한 React Native는 React를 알면 금방 배울 수 있습니다. 기존에 자바 스크립트 기반인 React로 웹 개발을 했었던 개발자에게는 매우 쉽게 앱 개발로 넘어갈 수 있습니다.

React 프리미티브는 네이티브 플랫폼 UI로 렌더링됩니다. 즉, 앱이 다른 앱과 동일한 네이티브 플랫폼 API를 사용합니다. 많은 플랫폼, 하나의 React. 단일 코드베이스가 플랫폼 간에 코드를 공유할 수 있도록 플랫폼별 구성 요소 버전을 만듭니다. React Native를 사용하면 한 팀이 여러 플랫폼을 유지 관리하고 공통 기술인 React를 공유할 수 있습니다.

import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';

const WelcomeScreen = () => (
  <View>
    <Header title="Welcome to React Native"/>
    <Text style={heading}>Step One</Text>
    <Text>
      Edit App.js to change this screen and turn it
      into your app.
    </Text>
    <Text style={heading}>See Your Changes</Text>
    <Text>
      Press Cmd + R inside the simulator to reload
      your app’s code.
    </Text>
    <Text style={heading}>Debug</Text>
    <Text>
      Press Cmd + M or Shake your device to open the
      React Native Debug Menu.
    </Text>
    <Text style={heading}>Learn</Text>
    <Text>
      Read the docs to discover what to do next:
    </Text>
   </View>
);

React Native를 사용하면 진정한 네이티브 앱을 만들 수 있으며 사용자 경험을 손상시키지 않습니다. 플랫폼의 기본 UI 빌딩 블록에 직접 매핑되는 보기, 텍스트 및 이미지와 같은 플랫폼에 구애받지 않는 기본 구성 요소의 핵심 세트를 제공합니다.

React 구성 요소는 기존 네이티브 코드를 래핑하고 React의 선언적 UI 패러다임 및 JavaScript를 통해 네이티브 API와 상호 작용합니다. 이를 통해 완전히 새로운 개발자 팀을 위한 네이티브 앱 개발이 가능하고 기존 네이티브 팀이 훨씬 빠르게 작업할 수 있습니다.

또한 JavaScript의 힘으로 React Native를 사용하면 번개처럼 빠르게 반복할 수 있습니다. 더 이상 기본 빌드가 완료될 때까지 기다릴 필요가 없습니다.

React Native 설치 방법 (npx create-expo-app)

모바일 개발을 처음 접하는 경우 시작하는 가장 쉬운 방법은 Expo Go를 사용하는 것입니다. Expo는 React Native를 기반으로 구축된 일련의 도구 및 서비스이며 많은 기능이 있지만 현재 우리에게 가장 관련성이 높은 기능은 몇 분 안에 React Native 앱을 작성할 수 있다는 것입니다.

Expo를 사용할 때 필요한 것은 최신 버전의 Node.js, 스마트폰 또는 에뮬레이터가 전부입니다. 도구를 설치하기 전에 웹 브라우저에서 직접 React Native를 사용해 보고 싶다면 Snack을 사용해 볼 수 있습니다.

이미 모바일 개발에 익숙하다면 React Native CLI를 사용할 수 있습니다. 시작하려면 Xcode 또는 Android Studio가 필요합니다. 이러한 도구 중 하나가 이미 설치되어 있으면 몇 분 안에 시작하여 실행할 수 있습니다. 설치되지 않은 경우 설치 및 구성하는 데 약 1시간이 걸릴 것으로 예상해야 합니다.

이번 글에서는 Expo 설치를 중심으로 알아보겠습니다.

Expo를 통한 React Native 설치

다음 명령을 실행하여 “AwesomeProject”라는 새 React Native 프로젝트를 만듭니다.

npx create-expo-app AwesomeProject

cd AwesomeProject
npm start # you can also use: npx expo start

yarn을 쓰는 경우는 아래와 같이 입력합니다.

yarn create expo-app AwesomeProject

cd AwesomeProject
yarn start # you can also use: yarn expo start

그러면 개발 서버가 시작됩니다. 이후 iOS 또는 Android 휴대폰에 Expo Go 앱을 설치하고 컴퓨터와 동일한 무선 네트워크에 연결합니다. Android에서는 Expo Go 앱을 사용하여 터미널에서 QR 코드를 스캔하여 프로젝트를 엽니다. iOS에서는 기본 iOS 카메라 앱의 내장 QR 코드 스캐너를 사용합니다.

이제 앱을 성공적으로 실행했으므로 수정해 보겠습니다. 선택한 텍스트 편집기에서 App.js를 열고 일부 줄을 편집합니다. 변경 사항을 저장하면 애플리케이션이 자동으로 다시 로드됩니다.

Expo 사용법

Expo에는 도구와 관련된 질문이 있는 경우 참조할 수 있는 문서도 있습니다. Expo Discord에서 도움을 요청할 수도 있습니다. Expo Go를 사용하면 iOS 및 Android 네이티브 SDK를 설치하지 않고도 물리적 장치에서 React Native 앱을 실행할 수 있습니다. iOS 시뮬레이터 또는 Android Virtual Device에서 앱을 실행하려는 경우 “React Native CLI 빠른 시작” 지침을 참조하여 Xcode를 설치하거나 Android 개발 환경을 설정하는 방법을 알아보세요.

설정을 마치면 npm run android를 실행하여 Android Virtual Device에서 또는 npm run ios(macOS만 해당)를 실행하여 iOS 시뮬레이터에서 앱을 시작할 수 있습니다.

Expo Go 앱은 시작하기에 좋은 도구입니다. 개발자가 신속하게 프로젝트를 시작하고 아이디어(예: Snack)를 실험하고 마찰을 최소화하면서 작업을 공유할 수 있도록 돕기 위해 존재합니다. Expo Go는 Expo SDK의 모든 모듈로 구성된 기능이 풍부한 네이티브 런타임을 포함하여 이를 가능하게 합니다. 따라서 모듈을 사용하려면 npx expo install로 패키지를 설치하고 앱을 다시 로드하기만 하면 됩니다.

단점은 Expo Go 앱에서 사용자 지정 네이티브 코드를 추가할 수 없다는 것입니다. Expo SDK에 내장된 네이티브 모듈만 사용할 수 있습니다. Expo SDK 외부에서 사용할 수 있는 훌륭한 라이브러리가 많이 있으며 고유한 기본 라이브러리를 빌드할 수도 있습니다. 개발 빌드와 함께 이러한 라이브러리를 활용하거나 “사전 빌드”를 사용하여 기본 프로젝트를 생성하거나 둘 모두를 사용할 수 있습니다. create-expo-app로 만든 프로젝트에 네이티브 코드를 추가하는 방법에 대해 자세히 알아보세요.

create-expo-app는 Expo SDK에서 지원하는 최신 React Native 버전을 사용하도록 프로젝트를 구성합니다. Expo Go 앱은 일반적으로 새로운 SDK 버전(분기별로 출시)과 함께 지정된 React Native 버전에 대한 지원을 얻습니다. 이 문서를 확인하여 지원되는 버전을 확인할 수 있습니다.

React Native를 기존 프로젝트에 통합하는 경우 Expo SDK 및 개발 빌드를 사용할 수 있지만 기본 개발 환경을 설정해야 합니다. React Native용 네이티브 빌드 환경 구성에 대한 지침을 보려면 위의 “React Native CLI 빠른 시작”을 선택하세요.

error: Content is protected !!