리액트 네이티브는 자바스크립트와 리액트 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술입니다.
리액트는 웹 애플리케이션의 UI를 편하게 만들기 위해 페이스북에서 개발한 자바스크립트 라이브러리입니다. 웹 개발을 위해 만들어진 라이브러리지만, 플랫폼에 구속받지 않습니다. 리액트에서 실제 웹에 해당하는 HTML과 DOM에 관련한 기능들은 별개의 라이브러리인 리액트돔에 들어있습니다.
따라서 웹 프로젝트에 리액트를 사용할 때는 리액트와 리액트돔을 함께 사용합니다.
리액트 네이티브를 사용하면 자바스크립트로 네이티브 앱을 만들 수 있기 때문에 자바스크립트로 작성한 코드가 네이티브에서 사용하는 코드로 변환된다고 오해할 수 있는데, 실은 그렇지 않습니다.
리액트 네이티브를 사용해 만든 프로젝트에는 JavaScriptCore라는 자바스크립트 엔진이 탑재되어 있으며 이 자바스크립트 엔진을 통해 우리가 작성하는 모든 자바스크리브 로직을 앱 내에서 실행해주는 것입니다.
리액트 네이티브에는 특별한 컴포넌트들이 내장되어있는데, 이 컴포넌트들은 네이티브 환경에서 사용되는 컴포넌트들과 연동되어 있습니다.
예를 들어 RN에 내장된 Text라는 컴포넌트를 사용하면 iOS 환경에서는 UIView에 텍스트 값을 설정해서 보여주고, 안드로이드 환경에서는 TextView를 화면에 보여줍니다.
컴포넌트는 재사용이 가능한 유저 인터페이스 블록이라고 이해하면 좋습니다. RN에서 이러한 컴포넌트를 사용할 때는 자바스크립트 형식의 파일에 페이스북에서 만든 JSX라는 문법을 사용해 코드를 작성해야 합니다. JSX로 코드를 작성하면 RN로 만든 앱 안에 내장된 스레드에서 이를 인식해 어떤 네이티브 컴포넌트를 보여줘야 할지 연산한 다음, 우리가 원하는 UI를 화면에 보여줍니다.
RN는 알림, 날짜 선택, 클립보드, 키보드 제어, 진동과 같은 작업같은 네이티브 플랫폼의 API들을 자바스크립트로 호출할 수 있게 해줍니다. 하지만 네이티브 플랫폼의 모든 API를 바로 사용할 수 있는 것은 아닙니다. RN으로 호출할 수 있는 API는 RN 라이브러리 안에 API Wrapper가 내장되어있지만, 동영상 재생, 카메라 촬영, 파일 선택 등의 기능은 자체적으로 탑재되어있지 않습니다. 대신 RN은 자바, 코틀린, Objective-C, 스위프트같은 네이티브 플랫폼의 코드로 작성한 기능을 자바스크립트로 연동해 호출할 수 있게 해주는 도구들을 제공합니다.
RN에 자체적으로 탑재되지 않은 기능들을 사용해야 할때, 대부분은 서드 파티 라이브러리를 설치해 원하는 기능을 구현할 수 있습니다. 하지만 복잡한 애플리케이션을 만들다 보면 필요한 라이브러리가 존재하지 않거나, 관련 라이브러리가 있어도 충분하지 않은 경우가 발생하기 때문에 자바, Objective-C 등의 언어를 사용해야 할 상황이 올 수도 있습니다.
자바스크립트의 런타임환경은 브라우저나 Node.js가 있는데 RN은 모바일에서 사용하는 것이기 때문에 Node.js를 사용합니다. 또한 브라우저에서는 크롬에서 만든 V8엔진을 사용하면 되지만, RN은 프로젝트 안에 내장된 자바스크립트코어엔진을 사용합니다.
