What is React Native?
안드로이드와 ios 플랫폼에 모두 호환이 되는 크로스플랫폼 앱 개발 프레임워크입니다. ios 플랫폼이나 안드로이드 플랫폼에서 앱을 실행시킬 때, 직접 네이티브 랭귀지(안드로이드를 위한 자바, 코틀린이나 ios를 위한 스위프트)와 커뮤니케이션 하지 않고 Bridge를 통해 JS를 가지고도 native language와 상호작용 할 수 있게 됩니다.
JS(개발) ↔ Bridge ↔ Native(실행)
이런 방식을 통해 javascript 기반으로 두 플랫폼에 모두 적용가능한 어플리케이션을 개발하는 것이 가능합니다.
그리고 이것을 가능하게 하는 프레임워크가 React Native 입니다.
1. React native를 실행시켜 보자
react 와는 달리 react native는 초기 세팅에 여러가지를 필요로 했습니다. 개발환경을 세팅하는 것 부터가 시작이었는데요.
초기 환경 구축에는 아래와 같은 프로그램이 필요합니다. 참고 사이트는 이곳. 그리고 이 블로그 게시글도 참고하였습니다.
맥의 경우 패키지 매니저인 홈브류 사용을 권장합니다.
- nvm (node version manager, node.js의 버전관리자, 설치 후 환경변수 설정을 해주어야 합니다.)
- node.js (12version 이상을 권장합니다.)
- Android Studio
- JAVA
- NPM (node.js를 깔면 자동으로 딸려옵니다.)
- X code
- visual studio code
- cocoa Pod
- react-native-CLI
입니다. 사실 이렇게 개발 환경을 맞추어 주어도 운영체제나 CPU에 따라 여러 돌발 상황이 발생할 수 있습니다.
2. TypeScript
타입스크립트란 자바스크립트에 추가적인 문법을 더하여 자바스크립트에서 일어나기 쉬운 에러들을 방지해 주는 역할을 합니다. 근본적으로는 일종의 Javascript이며, type이라는 문법을 추가한 JS 확장팩같은 개념입니다.
자세한 내용은 여기(영문)나 이곳(한글)을 참고해 주세요.
3. MobX
react 유저라면 한번쯤은 전역 상태관리 라는 용어를 들어보셨을 것 같습니다. 하나의 컴포넌트에서 선언된 상태를 다른 컴포넌트에 응용하기 위해 상위의 컴포넌트로 불러오고, 다시 sibling component로 내려주는 번거로움을 위해 존재하는 개념인데요. 전역 상태관리를 위한 다양한 라이브러리들이 존재하고 있습니다.
가장 유명한 전역 상태관리용 라이브러리로는 Redux가 있습니다. 유용하고 다양한 기능이 탑재된 만큼 사용방법이 어렵다는 단점이 있습니다.
제가 이번에 활용하게 된 전역상태관리 라이브러리는 MobX와 Mobx State Tree 입니다. 관련된 정보는 이곳(MobX.js)과 이곳(MobX-state-Tree).
제가 리덕스를 활용해보지 않은 상태에서 장단점을 비교하기는 어렵지만, 여러 의견에 따르면 redux보다 간결한 구조를 가지고 있다는 평을 듣습니다.
이렇게 react Native, typeScript, MobX를 응용한 project에 참여하며 react native를 배워보게 되었습니다.
