React Native에 대해 알아보자 - 개념, 설치, 실행 with Expo CLI

React.js

React.js는 UI를 만들기 위한 JavaScript 라이브러리다.

보통 웹 개발에 많이 사용되며, 컴포넌트 기반으로 UI를 구성하고 이를 통해 재사용 가능한 UI를 만들 수 있게 한다.

 

React-dom

리액트를 사용해 웹 애플리케이션을 구축하는 데 필요한 라이브러리다.

사실 리액트 자체는 플랫폼에 구축받지 않고 웹을 포함한 다양한 플랫폼에서 사용할 수 있는 독립적인 라이브러리다.

이 때 React-dom은 브라우저 환경에서 리액트 앱을 실제로 실행할 수 있게 해주는 도구다.

리액트가 가상 DOM을 사용해 UI를 업데이트하고, React-dom은 그 업데이트를 실제 dom에 반영한다.

 

React Native

React Native는 리액트의 개념을 모바일 애플리케이션에 적용한 툴이다.

필요한 컴포넌트와 API 등을 제공해 웹이 아닌 iOS와 Android에서 실행되는 네이티브 앱을 만들 수 있도록 한다.

 

 

Expo CLI vs React Native CLI

React Native로 앱을 개발할 때 사용되는 주요 CLI들이다.

두가지 모두 리액트네이티브 앱을 만들고, 시뮬레이터/배포 등을 할 수 있도록 지원한다.

 

Expo CLI

무료로 제공되는 서드파티 도구다.

개발에 필요한 여러 툴들을 제공하기 때문에, 초보자도 쉽게 RN 앱 개발을 시작할 수 있다.

Expo CLI로 시작하더라도 필요에따라 React Native CLI로 전환할 수 있다.

 

React Native CLI

네이티브 앱 개발을 위한 기본 환경을 제공한다.

초기 설정이 조금 더 복잡할 수 있지만, 네이티브 소스 코드와 JS 코드를 결합하기 쉽다.

 

Expo CLI로 RN 시작하기

1) 우선 expo cli를 설치하자!

sudo npm install -g expo-cli

* 윈도우는 sudo 없이 설치할 수 있다

 

2) expo를 입력해서 에러 없이 명령어가 실행되는지 확인

 

3) 프로젝트 생성하기

프로젝트를 만들고싶은 폴더로 이동해, 아래 명령어로 새로운 expo 프로젝트를 생성한다.

npx create-expo-app 프로젝트명 --template blank

-> 가장 기본적인 형태의 프로젝트 생성

 

4) 실행하기

npm start

 

프로젝트를 실행하면 터미널에 QR 코드가 표시되는데, 휴대폰에 Expo Go 앱을 설치하면 QR코드 스캔으로 어플을 사용해볼 수 있다.

 

5) 시뮬레이터 사용하기

PC에서 시뮬레이터를 사용해 앱을 실행할 수 있다.

(* 안드로이드 스튜디오, xcode를 통해 각각 안드로이드, iOS)

 

프로젝트 실행시 보이는 안내인데, 시뮬레이터가 실행돼있는 상태에서 원하는 환경을 선택하면 된다!

 

 

vs code 터미널에서 기본 명령어를 인식하지 못할 때

계속 zsh: command not found: node, ls 등 기본적인 명령어를 찾지 못하는 오류가 발생했다..

export PATH="/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin"

echo 'export PATH="/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin"' > ~/.zshrc
echo 'export PATH="/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin"' > ~/.zprofile
source ~/.zshrc
source ~/.zprofile

이렇게 경로를 설정해주면 다시 인식 가능하다!

그런데 계속 터미널에서 zsh 셸을 찾지 못하는 등.. 다양한 버그가 발생해서 vscode 자체를 재설치했다..