최종수정일: 24 June 2025

React Native 시작하기

by pear27

React Native를 활용한 모바일 애플리케이션 개발에 앞서, 본격적인 개발과 배포에 들어가기 전 필요한 사전 작업들을 정리해보았습니다.

🧰 1. Software Requirements

Node.js 설치 확인 (2025-06-24 기준)

설치된 Node.js 버전이 v18 미만인 경우, ReadableStream을 기본적으로 제공하지 않아 프로젝트가 실행되지 않습니다.

원활한 사용을 위해 v22.16.0의 Node.js를 설치합니다. CMD를 관리자 모드로 실행한 뒤, 아래 명령어를 입력합니다.
```
 nvm install 22.16.0
 nvm use 22.16.0
```
정상적으로 설정이 완료되면 아래 명령어로 버전을 확인할 수 있습니다.
```
 node -v
  # v22.16.0
 npm -v
  # 10.2.4
```
Expo 설치하기

Expo는 React Native로 개발한 모바일 어플리케이션을 미리 실행하고 테스트할 수 있는 오픈 소스 플랫폼입니다. JavaScript 코드와 Markup/Styling 작성 후 바로 앱을 테스트해 볼 수 있습니다.

CMD에서 아래 명령어를 입력하여 Expo를 설치합니다.
```
npm install --global expo-cli         
     # Install the command line tools
```
MAC 사용자의 경우: watchman 설치
```
 $ brew update
 $ brew install watchman
```
테스트할 모바일 기기(Android/IOS)에 Expo(혹은 Expo Go)를 설치하고, 계정을 생성합니다.

📦 2. Creating the App

새 프로젝트 만들기

CMD에서 아래 명령어를 입력하여 새 프로젝트 폴더를 생성합니다.
```
 npx create-expo-app@latest my-project
  # 프로젝트명은 my-project
```
- 예제 파일 삭제하기
  
  프로젝트 생성 후 기본적으로 생성되는 예제 파일들을 아래 명령어로 삭제하여 프로젝트를 초기화할 수 있습니다.
```
  npm run reset-project  
```
프로젝트 실행하기
```
 expo login
```
Expo 모바일 어플리케이션에서 생성한 계정으로 로그인합니다.
```
 npx expo start
```
프로젝트를 실행합니다.

정상적으로 실행되는 경우 모바일 기기의 Expo 어플리케이션에서 현재 실행 중인 프로젝트를 확인할 수 있습니다.

아래와 같이 App.js에 기본값으로 작성된 내용이 화면에 나타납니다.
```
 Open up App.js to start working on your app!
```
React JS를 사용할 때와 동일하게, 코드를 변경한 후 저장하면 바로 Expo 어플리케이션 화면에 반영됩니다.
- 🚧 Expo 앱에서 무한 로딩이 발생하는 경우 🚧
  
  Expo는 기본적으로 LAN 모드로 연결됩니다. 이 방식은 데스크탑과 모바일 기기가 같은 Wi-Fi 안에서 연결되어 있을 때만 작동합니다.
  
  따라서 두 기기가 서로 다른 네트워크에 있거나, 로컬 IP로 통신이 어려운 환경에서는 연결이 되지 않아 무한 로딩이 발생할 수 있습니다.
  
  이 경우에는 Tunnel 모드로 전환하십시오. 외부 네트워크 환경에서도 안정적으로 연결할 수 있습니다.
  
  아래 명령어를 터미널에 입력하세요:
```
  npx expo start --tunnel
```
  최초 실행 시 관련 패키지 설치가 필요할 수 있습니다.
프로젝트 빌드하기

Expo Application Services(EAS)를 이용하면 클라우드에서 앱을 컴파일하고 생산할 수 있습니다.

최초 1회, 아래 명령어를 입력하여 eas-cli를 설치하고 EAS에 로그인합니다. (Expo 계정 필요)
```
 npm install -g eas-cli
  # eas-cli 설치
 eas login
  # eas 로그인
```
현재 프로젝트에 EAS config(EAS 설정)를 생성하기 위해 아래 명령어를 입력합니다.
```
 eas build:configure
```
아래 명령어를 입력하여 현재 프로젝트를 클라우드에서 컴파일하고 빌드합니다.
```
 eas build --platform android --profile development
```
최초 실행 시 설치를 요구하는 파일이 있으면 설치해주고, keystore도 함께 생성합니다.

빌드가 완료되면 커맨드 라인에 QR 코드가 출력됩니다. 이를 Expo Go 앱에서 스캔하면 .apk 파일을 설치할 수 있는 링크로 이동합니다.

💡 React Native 문법: React JS와의 차이점을 중심으로

<View>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
</View>

View 태그: 모든 레이아웃 컨테이너로 사용됩니다.
Text 태그: 모든 텍스트 요소를 담을 때 사용됩니다. (p, span 등의 HTML 태그를 사용할 수 없습니다)

const styles = StyleSheet.create({
    container: {
        // 스타일 속성 정의
    },
});

StyleSheet 객체: 코드 에디터에서 CSS 자동 완성 기능을 지원합니다. (필수X)

tags: ReactNative
메인으로 돌아가기