[React Native] Expo로 React Native 앱 개발 시작하기

React Native 간단 설명

React Native앱에서 가장 중요한 부분: Bridge들을 통해 코드가 운영체제와 통신할수 있게하는 인프라 시설
앱을 컴파일 시켜야 하기 때문에 spk(윈도우), ipa(맥)가 필요하다. 이런 이유로 java(윈도우)와 xcode(맥)를 설치해야 한다.

그러나 Expo를 다운받으면 Java, Xcode를 설치하지 않고도 작성한 코드를 바로 확인해볼 수 있다.

React Native는 어떻게 작동하는가?

1. 사용자 인터랙션(터치, 스와이프 등) 발생:

• 사용자가 모바일 앱의 화면을 터치하거나 다른 인터랙션을 하면, 이벤트(event)가 발생한다.

2. 네이티브 코드로 이벤트 처리:

• iOS나 Android 플랫폼에서는 이벤트를 감지하고, 이에 대한 데이터를 수집한다. 예를 들어, 사용자가 버튼을 눌렀다면 iOS나 Android는 이를 감지하고 해당 이벤트에 대한 정보를 수집한다.

3. JavaScript 코드 실행:

• React Native는 JavaScript 엔진을 통해 동작한다. 네이티브(iOS/Android)에서 이벤트가 발생하면, 해당 이벤트를 처리하는 JavaScript 함수가 호출된다.

4. JavaScript와 네이티브 간 통신 (Bridge를 통한):

• JavaScript 코드는 이벤트 처리를 위해 네이티브 코드로 요청을 보낸다. 이를 가능하게 하는 것이 "Bridge"이다.
• 예를 들어, 버튼을 눌렀을 때 JavaScript는 네이티브 코드에게 "버튼이 눌렸다"는 메시지를 보낼 수 있다.

5. 네이티브 코드 실행:

• 네이티브 코드(iOS/Android)는 이 메시지를 수신하고 해당 작업을 수행한다.
• 예를 들어, "배경색을 빨간색으로 변경해주세요"라는 요청이 오면, 네이티브 코드는 해당 요청에 따라 UI를 업데이트하여 배경색을 변경한다.

결론적으로, React Native는 사용자의 액션을 JavaScript 코드로 전달하고, JavaScript 코드는 이를 처리하여 네이티브 코드로 변환하여 앱을 동작시킨다. 이 과정에서 Bridge가 중요한 역할을 한다. 사용자의 인터랙션과 화면의 업데이트를 네이티브 코드와 JavaScript 코드 간에 원활하게 연결해준다.

Expo 설치 방법

1. Expo CLI 설치

터미널을 열고 아래와 같이 입력

npm install --global expo-cli

설치가 되었는지 확인하고 싶다면 아래와 같이 입력

expo --version

2. 폰에서 Expo앱을 다운받고 회원가입, 로그인 하기

아이폰 Expo go
안드로이드 Expo

3. Expo 프로젝트 만들기

저는 바탕화면에 파일 만들어서 프로젝트를 만들었습니다.
아래와 같이 입력

expo init "프로젝트명"

4. 만든 프로젝트를 vscode로 열어준다.

터미널에서 expo에 로그인해준다. (폰으로도 로그인이 되어있어야한다)

expo login

username과 password를 입력해주면 로그인이 된다.

5. 터미널에서 실행해준다

아래처럼 입력

npm start

터미널에 QR코드랑 등등이 보인다. 폰으로 expo앱에 접속하면 실행시킨 프로젝트명이 보인다. 그걸 탭해서 들어가면 아래 화면이 보인다.

App.js에서 내용을 수정하면

이렇게 원하는대로 변경할 수 있다.

주의할점!!! 노트북과 폰이 같은 와이파이를 사용해야한다. ![]
(비밀번호가 걸려있는)