📚 공부 목적

개발 공부를 하다보니 앱도 만들어보고 싶은 생각이 들어서
비교적 접근이 쉬운 React Native를 공부하기로 했습니다.
React Native는 리액트 팀에서 만든 모바일 애플리케이션 프레임워크입니다.
그래서 기존에 사용했던 리액트의 기능을 일부 사용할 수 있고, 새로운 언어를 배우지 않아도 된다는 장점이 있습니다. (React Native에서 사용하는 컴포넌트만 공부하면 된다.)

저는 Nomad coder와 Udemy 강의를 보며 공부하였습니다. 😊

React Native

기본 설명

• 리액트 네이티브는 일종의 번역기 같은 역할입니다.
  => JSX로 작성된 코드가 각 운영체제(iOS 또는 android)에 맞는 언어로 컴파일 되어 동작합니다.

• 리액트 네이티브의 내장 컴포넌트를 활용하면 편리하게 개발이 가능합니다.(<View>, <Text> 등)

• 리액트 네이티브 내장 컴포넌트는 각 플랫폼에 맞는 요소로 컴포넌트를 매핑하고 컴파일됩니다. 기존 웹 브라우저를 위한 HTML element와 어떻게 다른지도 함께 참고해보세요!

Web Browser	React Native JSX	Android	iOS
<div>	<View>	android.View	UIView
<input>	<TextInput>	EditText	UITextField

---

코드 동작 원리

RN에서는 JSX요소 외의 JavaScript 로직은 별로도 컴파일 되지 않습니다.
리액트 네이티브가 호스트한 대로 JavaScript 스레드에서 실행됩니다.

1. 이벤트가 이루어짐(이것을 네이티브에서 수집)
2. 이벤트에 대한 데이터가 메시지로 만들어져서 전송됨 (’버튼이 눌렸습니다’)
3. 자바스크립트에서 그 이벤트에 대한 작동 코드가 실행됨
4. Javascript에서 native method를 호출하거나 UI 변경요청을 보냄
5. 운영체제에 맞는 네이티브언어로 그 명령이 변경
6. 디바이스에서 그게 실행 됨

• 자바스크립트는 메시지를 주고 받기 위해 쓰는 레이어일 뿐이다!

---

Expo 사용하여 개발 시작하기

RN 개발을 시작하는 방법에는 두 가지가 있습니다.
React CLI와 Expo CLI

둘 다 리액트 네이티브 프로젝트를 만들고 테스팅 기기 및 시뮬레이터에 React Native 앱을 실행할 뿐만 아니라 React Native앱을 구축하는 데 사용되어 앱스토어에 앱을 배포할 수 있도록 합니다.

Expo CLI

• Expo CLI는 서드파티서비스로 무료 서비스
• Expo에서 제공하는 여러가지 기능을 사용하여 좀 더 수월한 앱 개발이 가능
• 그리고 언제든지 Expo CLI 버전을 그만 둘 수 있다.(React Native CLI로 전환 가능)
  
  

React CLI

• Expo CLI가 나타나기 전에 React Native팀이 제공한 툴
• 기초적인 React Native 개발 설정을 제공
• Expo CLI보다는 살짝 번거롭다는 단점이 있다.

📌 CLI (Command Line Interface) : 명령 행 인터페이스

제가 배우고 있는 강의에서는 Expo로 시작합니다.

expo cli 다운로드하기

$ sudo npm install -g expo-cli

$ expo init myapp

$ expo login

$ npm start

로컬 환경에서 시뮬레이터 띄우기

android

1. android studio 실행
2. More Actions >> Virtual Device Manager >> 실행 버튼 클릭

ios

1. Xcode 실행
2. 상단 Preferences 메뉴 >> locations 탭 >> 버전 선택 된 것 확인 후 i 로 실행..(그냥 i 눌러도 될 것 같음..)

---

오늘은 기본적으로 RN이 무엇인지와 Expo를 사용하여 개발을 시작하는 것까지 정리해보았습니다.
다음은 본격적으로 React Native가 기존 React와 무엇이 다른지에 대해서 비교해보며 React Native를 학습해보겠습니다.

🐭