React Native Intro
Updated:
1.React VS React Native
React는 사용자 인터페이스 또는 UI 구성 요소를 구축하기 위한 오픈 소스 프론트 엔드 JS 라이브러리입니다. 페이스북과 개인 개발자 및 기업 커뮤니티에 의해 유지됩니다. 우리는 웹 앱을 만들기 위해 웹 개발에서 React를 사용합니다. React는 DOM에 데이터를 렌더링하는 데만 관심이 있으므로 React 응용 프로그램을 만들려면 일반적으로 상태 관리 및 라우팅을 위한 추가 라이브러리를 사용해야 합니다. Redux와 React Router는 이러한 라이브러리의 각각의 예입니다.
리액트 네이티브(React Native)는 페이스북이 만든 오픈 소스 모바일 애플리케이션 프레임워크이다. 개발자들이 네이티브 플랫폼 기능과 함께 리액트 프레임워크를 사용할 수 있게 함으로써 안드로이드와 iOS용 애플리케이션을 개발하는 데 사용된다. React Native는 Android와 iOS의 네이티브 플랫폼과 대화하는 방법과 네이티브 위젯을 렌더링하는 방법을 알고 있으며 이러한 위젯을 React 구성 요소로 제공하여 이러한 구성 요소로 사용자 인터페이스를 구축할 수 있습니다. 그래서 네이티브 코드에는 그것과 직접적인 동등한 것이 없다. React Native는 또한 일부 네이티브 플랫폼 API에 대한 액세스를 제공합니다. 예를 들어 장치 카메라 사용을 돕고 JS 코드를 네이티브 플랫폼 코드에 연결하는 도구를 제공합니다.
2.Expo CLI VS React Native CLI
React Native Environment Setup - https://reactnative.dev/docs/environment-setup
Expo CLI
Expo 는 서드파티 서비스로 무료로 사용가능하며, 앱을 빌드 할때도 따로 금액을 지불하지 않아도 됩니다. React Native App 과 비교하였을때 쉽고 적용을 빠르게 할 수 있습니다. 큰 장점은 많은 네이티브 와 비슷한 기능들을 추가 설치를 하여 쉽게 사용할 수 있습니다 예를 들어 카메라, 위치, 알림설정, 센서 등을 일일히 설정을 하지 않아도 package 설치만으로도 사용이 가능합니다. Android Studio 또는 Xcode 없이도 preview 상태의 App 을 사용할 수 있습니다. 단점은 정해진 범위해서 앱을 개발해야 되기때문에, Native Code 에 접근할 수 없습니다 (오직 JS Code 로만 App 개발을 해야된다는 단점임!!)
React Native CLI
React Native 개발 팀에서 지원하는 CLI 툴로서, 세세한 설정을 다룰 수 있으며, Java, Swift 등 Native code 와 연결해서 App 개발을 사용할 수 있습니다. Android Studio 와 Xcode 를 접속해서 개발자 스스로 앱 설정을 변경 할 수 있습니다. 하지만, 큰 단점은 하나하나 개발자가 다 설정해줘야 된다는 점입니다. 그렇게 때문에 앱 구조가 복잡하며, 시간이 오래 걸립니다
결론
App 개발을 시작하는 단계 에서는 접근성이 쉬운 Expo CLI 로 도 간단한 앱을 충분히 만들 수 있어서 그것을 토대로 앱개발을 할 수 있습니다. 만약 더 많은 기능을 추가 및 설정을 하려면 나중에 Eject project 로 해서 React Native CLI 상태에서 변경할 수 있습니다
3.Creating First App with Expo
expo - https://docs.expo.dev/
Node-JS 가 설치되어 있다는 가장하에 expo CLI 설치
npm i -g expo-cli
그리고, 생성하고 싶은 폴더에서 프로젝트 생성
npx create-expo-app my-app
앱을 초기 생성하고, 터미널 창에 yarn start 하게 되면 localhost 로 dev 빌드가 되면서 web 브라우저 상에 simulator 가 실행이 됩니다
Android 시뮬레이터, iOS 시뮬레이터 등 각각의 디바이스에 실행을 할 수 있습니다
4.Developer Menu in iOS simulator
Developer menu 를 통해서 여러가지 debugging option 들을 설정할 수 있습니다
단축키 control + command + z
5.Android Simulator
https://docs.expo.dev/workflow/android-studio-emulator/
Expo doc 에서 Android Studio 설정을 통해서 SDK 설치 및 Android Emulator 를 설정 합니다
# in .bash_profile
export ANDROID_HOME=/Users/jacobko/Library/Android/sdk
export PATH=/Users/jacobko/Library/Android/sdk:$PATH
# in .zshrc
export ANDROID_HOME=/Users/jacobko/Library/Android/sdk
export PATH=/Users/jacobko/Library/Android/sdk:$PATH
Emulator 설정을 마치면 react native App 에서 Android Studio를 실행하게 되면
Developer Menu 단축키는 command + m
🗃 Reference
Programming with Mash - https://youtu.be/ANdSdIlgsEw
Leave a comment