리액트 네이티브(React Native) 시작 하기

리액트 네이티브 시작하기 (안드로이드 기준)

리액트 네이티브(React Native)는 모바일 앱을 개발하기 위한 프레임워크로, iOS와 Android 플랫폼 모두에서 범용적으로 사용할 수 있습니다.

기본 개념
1. JSX: 리액트와 마찬가지로 JSX라는 문법을 사용하여 구성합니다. JSX는 JavaScript와 HTML을 결합한 형태로 사용됩니다.
2. 컴포넌트: UI를 컴포넌트 단위로 구성합니다. 각 컴포넌트는 독립적으로 관리되며, 재사용이 가능합니다.
3. 스타일링: CSS 대신 StyleSheet를 사용하여 스타일을 정의합니다. 이는 JavaScript 객체 형태로 스타일을 적용할 수 있게 해줍니다.

준비 단계
1. 환경 설정

기본적으로 Node.js와 npm, JDK( Java Development Kit)를 설치해야 합니다. 그 후, React Native CLI 또는 Expo CLI를 사용하여 프로젝트로 생성가능합니다.  이 글의 작성 시점 기준으로  최신 버전을 설치한다고 가정했을때 Node.js 는 18 이상, JDK 는 17 이상을 설치해야 문제가 없습니다.

참고 :  https://reactnative.dev/docs/set-up-your-environment

Set Up Your Environment · React Native

2. 안드로이드 스튜디오 설치 및 설정

: 아래의 공식 웹사이트에서 개발하려는 OS에 맞는 최신 버전을 다운로드 합니다.

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

1) SDK 및 가상 장치 설정
설치된 안드로이드 스튜디오를 실행후, "Configure" 에서 "SDK Manager"를 선택하고 필수 SDK 플랫폼과 도구를 설치합니다.
그리고 나서 "More Actions" > "Virtual Device Manager"를 클릭후 "Create Device"를 실행후 원하는 기기 모델(예: Pixel 11)을 
선택하고 "Next"를 클릭하고 시스템 이미지를 선택하고 (최신 버전 권장) 에뮬레이터의 이름을 지정하고 "Finish"를 클릭합니다.

* 필수 SDK Tool

1) Android SDK: 안드로이드 소프트웨어 생태계를 위한 소프트웨어 개발 키트(SDK)로, 디버거, 라이브러리, 핸드셋 에뮬레이터, 문서, 샘플 코드 및 튜토리얼을 포함합니다.
2) Android Emulator: 실제 기기 없이도 앱을 테스트할 수 있도록 해주는 도구로, 다양한 안드로이드 기기 환경을 시뮬레이션합니다.
3) Android SDK Build-Tools: 앱을 빌드하고 패키징하는 데 필요한 도구들로, Gradle과 함께 사용됩니다.
4) Android SDK Platform-Tools: adb(Android Debug Bridge)와 같은 도구를 포함하여, 개발자가 안드로이드 기기와 상호작용할 수 있도록 돕습니다.
5) Android SDK Tools: 안드로이드 스튜디오와 함께 제공되는 기본 도구로, SDK 관리 및 업데이트를 지원합니다.
6) intel x86 emulator accelerator HXAM installer : 하드웨어 가속 실행 관리자 (설치가 안되는 경우 윈도우의 Hyper-V를 활성화해서 사용)

2) 환경 변수 설정 (Window키 + R를 눌러 실행 창 열고 sysdm.cpl 입력하고 엔터)
. ANDROID_HOME  설정 : 시스템 속성의 '고급'의 환경 변수에서 '시스템 변수'로 ANDROID_HOME을 추가하고, SDK 경로를 설정하는데 예를 들어, Windows에서는 C:\Users\<사용자명>\AppData\Local\Android\Sdk와 같은 경로를 사용할 수 있음

. 공통PATH 설정 :  '<사용자명> 변수'의  PATH 에 platform-tools와 tools 디렉토리를 추가합니다.
(예 : %PATH%;%JAVA_HOME%\bin;%ANDROID_HOME%\platform-tools)

. JAVA_HOME 설정(기본 설정이 되어 있다면 상관없지만 그래도 JDK버전이 낮아 재 설치 하는 경우를 고려하여 다시 설정)
(예: C:\Program Files\Java\jdk-17)

3. 리액트 네이티브 CLI 설치
npm install -g react-native-cli

4. 리액트 네이티브 프로젝트 생성:
터미널에서 다음 명령어를 사용하여 새로운 프로젝트를 생성합니다:
npx react-native init MyProject

5. 필수 라이브러리 설치
: 리액트 네이티브의 기본 터치 시스템인 Gesture Responder System을 대체하는 것으로 최신 리액트 프로젝트 에서는 설치를
해야 에러가 발생하지 않습니다.
npm install react-native-gesture-handler

index.js 나 App.js의 최상위에 아래 코드 추가
import 'react-native-gesture-handler';

6. 안드로이드 에뮬레이터에서 앱 실행:
프로젝트 디렉토리로 이동한 후, 다음 명령어를 실행하여 앱을 실행합니다:
npx react-native run-android