React Native 시작하기

모바일 앱 개발을 위하여 React Native를 활용한 프로그래밍을 시작하였다.
※ 구현 환경 : Windows 11

 

# React Native 개요

React Native는 Facebook에서 만든 오픈소스 모바일 애플리케이션 프레임워크로, 네이티브 UI 컨트롤을 제공하고 네이트브 플랫폼에 대한 모든 액세스를 제공하는 Android, iOS, 웹 및 UWP(Windows)용 애플리케이션을 개발하는 데 사용됩니다.

 

# 개발을 위한 기본 구성 (일단 Android 까지)

1) Node.js : Javascript 소프트웨어 플랫폼
2) JAVA JDK : JAVA 관련 개발 시 필수 (JAVA_HOME 환경변수 등록 필수)
3) 코드 편집기 : Microsoft Visual Studio Code 혹은 IntelliJ 가 요즘 대세
4) Android Studio : 코딩 결과물을 확인할 수 있는 Android 에뮬레이터 설치 (ANDROID_HOME 환경변수 등록 필수)
5) React Native 프로젝트 패키지 설치 : EXPO(초보자용) 혹은 React Native Cli(중상급자용)
6) iOS 관련 구성 프로그램 설치는 일단 보류

 

# 샘플 프로젝트 생성 및 에뮬레이터 구동 

1) 프로젝트 생성

npx react-native init MyReactNativeApp

2) 해당 프로젝트 폴더로 이동

cd MyReactNativeApp

3) Android 에뮬레이터 실행

npx react-native run-android

※ 이때, 만약 gradle 관련하여 다음 문구와 같은 에러가 발생한다면,
(BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 64)
JAVA 버전에 따른 gradle 버전이 호환되지 않아서 발생하는 오류이다.
아래 링크를 참고하여 본인에게 맞는 gradle 버전을 확인한 뒤,
프로젝트 폴더 내 android/gradle/wrapper/gradle-wrapper.properties 파일에서
distributionUrl 항목의 gradle-X.X-bin.zip 파일의 버전을 수정한 뒤 다시 시도하면 된다.
https://docs.gradle.org/current/userguide/compatibility.html

Compatibility Matrix

4) 새 콘솔창 열리고, Metro 번들러 실행 후 안드로이드 에뮬레이터 실행됨

Metro 번들러 실행창

Android 에뮬레이터 실행창

 

# 참고 사이트

https://learn.microsoft.com/ko-kr/windows/dev-environment/javascript/react-native-for-android

Windows에서 Android 개발용 React Native

https://velog.io/@holidenty/React-Native-React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React Native] React Native 프로젝트 시작하기

https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/

윈도우(Windows)에 react native 개발 환경 구축하기