[React Native] 리액트 네이티브 개발하기 - 개발환경 세팅 ( 시작하기 )

 

 

 

1. 리액트 네이티브란? 

• 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워트입니다. 
• IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다. 

 

📱 특징 요약

✅ 크로스 플랫폼	iOS, Android 앱을 한 번에 개발 가능
⚛️ React 기반	React의 컴포넌트 구조와 상태 관리 사용
📦 네이티브 컴포넌트 사용	HTML이 아닌 네이티브 UI 요소(ex. Text, View, Button) 사용
🔄 실시간 반영	코드 수정 후 빠르게 반영되는 Fast Refresh 지원
💬 커뮤니티 활발	많은 오픈소스와 라이브러리 지원

 

리액트 네이티브를 선택한 이유는 사전에 react를 다뤄본 경험이 있어서, 접근성이 좋다고 판단되었습니다. 

 

장점

• 다른 언어를 학습하지 않앋 된다. JavaScript를 기반으로 하기에 타언어보다 진입장벽이 낮습니다.
• Component기반으로 기능을 분리하지 때문에 코드 재사용성이 높습니다.
• 하나의 언어, 두개의 코드로  두 개의 OS앱을 개발할 수 있어서 일반적인 경우 보다 비용이 적게 듭니다.

단점

• JavaScript를 기반으로 하기 때문에 언어를 모른다면 학습을 해야 합니다.
• 일반 애플리케이션보다 스레드 시간이 길기 때문에 성능이 저하를 경험할 수 있습니다.
• 오픈소스이기 때문에 업데이트가 자주 발생합니다. 

 

📌 React Native는 이런 사람에게 추천

• 웹 개발자 출신인데 모바일 앱도 만들고 싶은 사람
• iOS와 Android 앱을 한 번에 만들고 싶은 사람
• Java/Kotlin, Swift를 모두 배우기 부담스러운 사람

 

 

 

2. React Native 개발 방식 비교

리액트는 일반적으로 Expo와 React-Native-Cli을 이용합니다. 

 

 

1. Expo

• React Native 초보자에게 추천 – 쉽고 빠르게 시작 가능
• 다양한 Expo SDK API 제공 (카메라, 알림, 위치 정보 등)
• 앱 빌드가 간편하고, 코딩 없이도 테스트 가능

장점
✔️ 빠른 개발 속도
✔️ 설정이 간단 (Android Studio, XCode 없이도 가능)
✔️ 실시간 테스트 지원

 

단점
❗ 빌드 시간이 길다
❗ 앱 크기가 커진다
❗ Expo에서 지원하지 않는 네이티브 기능을 쓰기 어렵다

 

📌 요약: 빠른 프로토타입 제작엔 최고지만, 배포용 프로젝트에는 제약이 있음

---

2. React Native CLI

• 모듈 사용의 자유도가 높음
• 직접 네이티브 모듈 개발도 가능
• 실제 상용 앱에서 커스터마이징하기에 적합

장점
✔️ 네이티브 기능 완전 제어 가능
✔️ 자유로운 라이브러리 설치 및 설정

 

단점
❗ 환경 구축 복잡 (Android Studio, Xcode 필요)
❗ 초보자에게는 진입장벽이 있음

 

📌 요약: 초기 설정은 복잡하지만, 완성도 높은 앱 제작에는 필수

 

 

 

 

 

 

 

3. 개발 환경 구축

📌 Node.js 설치

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

 

버전 확인

node --version
v22.15.0

 

 

📌 React-native-cli 설치

npm install -g react-native-cli

 

 

 

📌 JDK 설치 및 환경변수 설정

https://www.oracle.com/kr/java/technologies/downloads/

Download the Latest Java LTS Free

 

시스템 환경 변수 편집

• JAVA_HOME
  - 변수 이름 : JAVA_HOME
  - 변수 값 : C:\Program Files\Java\jdk-(설치한 버전)
• CLASSPATH
  - 변수 이름 : CLASSPATH
  - 변수 값 : %JAVA_HOME\lib
• 새로 만들기를 클릭하여 %JAVA_HOME%\bin을 입력한 후 위로 이동 버튼으로 가장 위에 위치시킴

자바 버전 확인

java --version
java 24.0.1 2025-04-15

 

https://velog.io/@soyul2823/window-JAVA-%EC%84%A4%EC%B9%98-%EB%B0%8F-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95

[window] JAVA 설치 및 환경변수 설정

 

 

📌 Android Studio 설치

https://developer.android.com/studio?hl=ko&_gl=1*1b77rpd*_up*MQ..*_ga*NTkyOTc3MjYzLjE3NDY1MTczODA.*_ga_6HH9YJMN9M*czE3NDY1MTczODAkbzEkZzAkdDE3NDY1MTczODAkajAkbDAkaDI1MDMyNjQwNg..

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

 

 

 

 

 

참고

---

 

https://velog.io/@seewon/%EB%84%88%EB%84%A4-%EB%AC%B4%EC%8A%A8-%EC%82%AC%EC%9D%B4%EC%95%BC..-React-React-Native

너네 무슨 사이야..? React 🆚 React Native

 

https://firework-ham.tistory.com/102

[React Native] 리액트 네이티브란? 장단점

 

https://medium.com/official-podo/expo%EB%A1%9C-%EC%95%B1-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B8-%ED%9B%84%EA%B8%B0-vs-vanilla-react-native-fc20c8dac937

expo로 앱 만들어본 후기(vs vanilla react-native)

https://yun5o.tistory.com/entry/React-Native-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%951-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React Native] 리액트 네이티브 개발환경 설정(1/6) - 시작하기