(1) 리액트 네이티브 첫 걸음 01

1. 리액트 네이티브란?

* 리액트 네이티브는 자바스트립트와 리액트 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술이다. 이 기술을 사용해 만든 앱은 애플(Apple)의 iOS 환경에서도, 구글(Google)의 안드로이드(Android) 환경에서도 구동할 수 있다. 주로 모바일 앱을 개발하거나, 모바일 디바이스에 국한되지 않고, VR(가상 현실), 윈도우(Windows), TV 등의 환경에서도 사용할 수 있다.

* 즉, 리액트 네이티브를 사용하면 리액트에서 사용하는 기술을 웹 브라우저에 한정시키지 않고 iOS 및 안드로이드 환경에서 구동하는 애플리케이션을 만들 수 있다는 말이다.

* 리액트 네이티브를 사용하면 자바스크립트로 네이티브 앱을 만들 수 있기에 자바스크립트로 작성한 코드가 네이티브에서 사용하는 코드로 변환된다고 오해할 수 있는데, 실은 그렇지 않다. 리액트 네이티브를 사용해 만든 프로젝트에는 JavaScriptCore라는 자바스크립트 엔진이 탑재되어 있으며 이 자바스크립트 엔진을 통해 우리가 작성하는 모든 자바스크립트 로직을 앱 내에서 실행해 주는 것이다.

* JavaScriptCore

- 이에 대해 더 자세히 알고 싶다면 다음 링크를 참조하자.

https://developer.apple.com/documentation/javascriptcore

JavaScriptCore | Apple Developer Documentation

---

* 리액트 네이티브에는 특별한 컴포넌트들이 내장되어 있는데, 이 컴포넌트들은 네이티브 환경에서 사용되는 컴포넌트들과 연동되어 있다. 예를 들면 리액트 네이티브에 내장된 Text라는 컴포넌트를 사용하면 iOS 환경에서는 UIView에 텍스트 값을 설정해 보여주고, 안드로이드 환경에서는 TextView를 화면에 보여 준다.

* 프론트엔드 개발에서 컴포넌트란 "재사용 가능한 유저 인터페이스 블록"이라 이해하면 된다.

* 리액트 네이티브에는 Text 컴포넌트 외에도 Button, View, TextInput, FlatList 등 수많은 컴포넌트가 내장되어 있다. 컴포넌트를 사용할 때는 자바스크립트 형식의 파일에 페이스북에서 만든 JSX라는 문법을 사용해 코드를 작성한다. JSX로 코드를 작성하면 리액트 네이티브로 만든 앱 안에 내장된 스레드에서 이를 인식해 어떤 네이티브 컴포넌트를 보여줘야 할지 연산한 다음, 우리가 원하는 UI를 화면에 보여준다.

* 또한 리액트 네이티브는 네이티브 플랫폼들의 API들을 자바스크립트로 호출할 수 있게 해 준다. 이를테면 알림, 날짜 선택, 클립보드, 키보드 제어, 진동과 같은 작업들을 자바스크립트로 구현할 수 있다. 하지만 네이티브 플랫폼의 모든 API를 바로 사용할 수 있는 것은 아니다. 리액트 네이티브로 호출할 수 있는 API는 리액트 네이티브 라이브러리 안에서 API 래퍼(Wrapper)가 내장되어 있지만, 동영상 재생, 카메라 촬영, 파일 선택 등의 기능은 자체적으로 탑재되어 있지 않다. 대신 리액트 네이티브는 네이티브 플랫폼의 코드(자바, 코틀린, Objective-C, 스위프트)로 작성한 기능을 자바스크립트로 연동해 호출할 수 있게 해주는 도구들을 제공한다.

* 앞으로 리액트 네이티브로 앱을 만들 때, 리액트 네이티브에서 자체적으로 탑재되지 않은 기능을 사용해야 할 때도 많을 것이다. 이 경우 대부분은 서드 파티 라이브러리르를 설치해 원하는 기능을 구현할 수 있다. 리액트 네이티브의 생태계는 꽤나 성숙한 편이고, 정말 많은 라이브러리가 오픈 소스로 공개되어 있기 때문에 상황에 따라서는 네이티브 코드를 전혀 작성하지 않고 자바스크립트만 사용해 원하는 앱을 완성할 수도 있다.

* 하지만 복잡한 애플리케이션을 만들다 보면 필요한 라이브러리가 존재하지 않거나, 관련 라이브러리가 있어도 우리의 요구사항에 충족하지 않는 경우가 발생하기도 한다. 따라서 앱을 개발하는 과정에서 특정 기능을 구현하기 위해 자바(Java), Objective-C 등의 언어를 사용해야 하는 상황이 올 수도 있음을 꼭 염두에 두어야 한다.

---

2. 작업 환경 준비하기

* 리액트 네이티브의 가장 큰 장점은 자바스크립트로 코드를 작성해 iOS 기기에서도 구동하고 안드로이드 기기에서도 구동하는 애플리케이션을 개발할 수 있다는 것이다. 하지만 안타깝게도 iOS 앱을 개발하려면 반드시 애플의 맥OS(macOS)를 사용해야 한다. 다른 운영 체제에서는 iOS 앱을 컴파일할 수 없기 때문이다. 따라서 리액트 네이티브로 개발할 때는 맥OS 기기를 사용하는 것이 가장 이상적이다.

* 그러나 윈도우 훅은 리눅스를 사용한다 할지라도 일단 안드로이드 위주로 학습하고 개발해도 전혀 지장이 없다. 나중에 우리만의 애플리케이션을 개발해 구글 플레이에 릴리스한 뒤, 애플 앱 스토어에도 릴리스하고 싶은 시점이 왔을 때 맥OS 기기를 구매해도 늦지 않다.

* 맥OS 기기가 없다고 해서 iOS 앱 개발 및 릴리스가 완전히 불가능한 것은 아니다. macincloud와 같은 서비스를 사용하면 클라우드로 맥OS에 접속해 iOS 앱을 개발할 수 있다. 다만 권장하는 방식은 아니며 원활한 개발을 위해선 실제 기기를 사용하는 것이 좋다.

https://www.macincloud.com/

MacinCloud - Rent a Mac in the Cloud! - Mac in Cloud

* 추가로 리액트 네이티브로 앱을 개발하기 위해서는 iOS와 안드로이드 실제 기기를 하나씩 보유하고 있으면 좋다. 실제 기기가 없다면 시뮬레이터를 통해 우리가 만든 앱을 테스트해 볼 수 있지만, 릴리스하기 전에 실제 기기에서 한번 테스트해 보는 것이 좋다. 시뮬레이터에서는 제대로 작동하는데 실제 기기에서는 제대로 작동하지 않는 상황이 발생할 수 있기 때문이다. 또한 실제 기기를 사용하면 개발하는 과정에서 컴퓨터 자원을 덜 사용할 수 있다는 이점도 있다.

* 일단 여기서는 윈도우를 사용한다는 가정 하에 설명할 것이나, 다른 운영 체제를 사용해도 실습을 진행하는 데는 문제가 없으므로, 초반에 설명하는 윈도우, 리눅스의 작업 환경 설정 방법과 참고 링크를 잘 살펴보자.

---