React Native 시작하기|설치부터 실행까지 총정리

React Native는 React 문법으로 Android와 iOS 앱을 동시에 만들 수 있는 프레임워크입니다. Node.js만 설치되어 있다면 npx create-expo-app 명령어 한 줄로 프로젝트를 생성하고, Expo Go 앱을 통해 실시간으로 결과를 확인할 수 있습니다. 아래에서 개발 환경 준비부터 첫 실행까지 순서대로 정리해드리겠습니다.

React Native란?

React Native는 React의 문법으로 Android와 iOS 앱을 개발할 수 있는 프레임워크입니다. React를 다뤄본 개발자라면 몇 시간 만에 익숙해질 수 있을 만큼 문법이 유사합니다. 다만 브라우저의 HTML Element 대신 View, Text 같은 자체 태그를 사용하고, CSS 대신 StyleSheet를 이용한 스타일링만 지원한다는 차이가 있습니다. 최근에는 Styled Component나 PostCSS를 지원해, 웹 개발자나 퍼블리셔도 무리 없이 UI를 구성할 수 있게 되었습니다.

개발 환경 준비하기

React Native를 시작하기 전에 먼저 Node.js 버전을 확인해야 합니다.

node -v

Node.js LTS 버전을 사용하는 것을 권장합니다. 버전이 너무 낮거나 너무 최신이면 호환성 문제로 에러가 발생할 수 있으니, 문제가 생기면 LTS 버전으로 맞춰보는 것이 좋습니다.

Expo로 프로젝트 생성하기

과거에는 expo-cli를 전역 설치한 뒤 expo init 명령어로 프로젝트를 만들었지만, 이 방식은 현재 더 이상 권장되지 않습니다. 지금은 아래 명령어 하나로 바로 프로젝트를 생성할 수 있습니다.

npx create-expo-app 앱이름
cd 앱이름
npx expo start

Mac 사용자는 Watchman도 함께 설치해두는 것이 좋습니다.

brew update
brew install watchman

Expo를 사용하면 Xcode나 Android Studio 같은 네이티브 개발 환경 없이도 개발을 시작할 수 있다는 점이 가장 큰 장점입니다. 다만 네이티브 모듈을 직접 다뤄야 하는 기능이 필요해지면 이후 React Native CLI로 넘어가는 경우도 많습니다.

Expo Go 앱으로 실시간 확인하기

프로젝트를 생성하고 개발 서버를 실행했다면, 이제 실제 기기에서 확인할 차례입니다.

  1. 앱스토어나 플레이스토어에서 Expo Go 앱을 설치합니다. (회원가입 필요)
  2. 터미널에 표시된 QR코드를 Expo Go 앱으로 스캔합니다.

성공하면 휴대폰 화면에 “Open up App.tsx to start working on your app!”라는 문구가 뜹니다. 처음 이 화면을 봤을 때 정말 명령어 몇 줄로 실제 폰에서 앱이 돌아가는 게 신기해서, 괜히 App.tsx의 텍스트를 이것저것 바꿔가며 실시간으로 반영되는 걸 한참 구경했던 기억이 있네요. App.js 혹은 App.tsx 파일의 내용을 수정하면 저장하는 즉시 폰 화면에도 바로 반영됩니다.

Expo vs React Native CLI, 뭐가 다를까?

Expo는 초기 설정이 쉽고 빠르게 개발을 시작할 수 있으며, 다양한 라이브러리와 플러그인을 바로 활용할 수 있다는 장점이 있습니다. 반면 앱 사이즈가 커지고 빌드 속도가 느리며, 일부 네이티브 모듈 사용이 제한된다는 단점도 있습니다.

React Native CLI는 네이티브 기능을 자유롭게 다룰 수 있지만, 초기 환경 설정이 더 복잡합니다. 처음 시작할 때는 Expo로 빠르게 감을 잡고, 네이티브 기능이 꼭 필요해지는 시점에 CLI로 넘어가는 방식을 추천드립니다.

자주 묻는 질문(FAQ)

Q1. React Native는 React를 몰라도 배울 수 있나요?
문법 자체가 React와 거의 동일해서, React를 먼저 배운 뒤 시작하는 것을 추천합니다. React를 모른 채 시작하면 컴포넌트, state, props 같은 기본 개념부터 함께 익혀야 해서 진입장벽이 높아질 수 있습니다.

Q2. Expo와 React Native CLI 중 뭘 먼저 배워야 하나요?
처음이라면 Expo로 시작하는 것을 추천합니다. 설정이 간단해서 빠르게 앱을 만들어보며 감을 잡을 수 있고, 이후 네이티브 기능이 필요해지면 CLI로 전환하면 됩니다.

Q3. Mac이 없어도 iOS 앱을 테스트할 수 있나요?
Expo Go 앱을 사용하면 Mac 없이도 iOS 기기에서 실시간으로 앱을 확인할 수 있습니다. 다만 최종적으로 iOS 앱을 빌드하고 배포하려면 Mac과 Xcode가 필요합니다.

Q4. expo init이 실행이 안 되는데 왜 그런가요?
expo init과 expo-cli는 더 이상 지원되지 않는 구버전 방식입니다. 대신 npx create-expo-app 앱이름 명령어를 사용하면 정상적으로 프로젝트가 생성됩니다.

AOS(Animate On Scroll) 사용법 총정리 (React 포함)

가상메모리 설정 방법 RAM 용량별 최적 크기표

Raycast 사용법 Mac Windows 둘 다 정리했습니다

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다