React Native (1: RN에 대해~)

React Native는 iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 JS 프레임워크이다. 프론트엔드 개발에 사용되는 React 에 기반을 두어 만들어졌으며, 현재 페이스북, 에어비앤비, 월마트, 바이두 등 여러 큰 회사들이 React Native 를 실무에서 사용하고 있다고 한다.

 

 

 

React Native 의 렌더링 갱신 주기는 React 와 같다고 한다. props 나 state 가 변경될 때 React Native 또한 다시 뷰를 렌더링하는 것이다. 여기서 React Native 와 React 의 차이점은, React Native 는 HTML 과 CSS 마크업이 아닌 대상 플랫폼의 UI 라이브러리를 이용해 렌더링한다는 점이다.

 

 

 

그렇다면 어떻게 React Native (Javascript) 를 통해서 앱을 빌드할 수 있는 것일까? 이를 기술적 측면에서 이해하기 위해서는 우선 Virtual DOM 에 대해서 알 필요가 있다고 한다. React 에서 Virtual DOM 은 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어에 해당한다. 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서 개발자는 반드시 브라우저의 DOM 을 수정해야 하는데, 이는 성능저하를 유발한다. 그래서, React 는 페이지의 변화를 바로 렌더링하는 것이 아니라, 먼저 메모리에 존재하는 가상 DOM 에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링하는 것이다.

 

 

React Native 에서는 브라우저의 DOM 이 아닌, 다른 타겟으로 이러한 렌더링을 진행하는 것이다. 브라우저의 DOM 으로 렌더링하는 대신, React Native 는 오브젝티브-C API 를 호출하여 iOS 컴포넌트로 렌더링하고, 자바 API 를 호출하여 안드로이드 컴포넌트로 렌더링한다. 이는 React Native 의 '브리지'가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 때문에 가능한 일이다. 

 

 

 

또, React Native 에서의 Lifecycle 은 웹에서의 렌더링과도 같지만, 그 절차는 조금 다르다. 왜냐하면 React Native 는 브리지에 의존하기 때문이다. 브리지는, 자바스크립트에서 발생하는 호출을 대상 플랫폼의 API, UI 엘리먼트에 연결한다. React Native 는 메인 UI 스레드에서 동작하지 않기 때문에 사용자 경험에 영향을 주지 않고 비동기적으로 실행할 수 있다고 한다.

 

 

 

React Native 는 웹에서 사용하던 태그들과 같은 요소 대신에 플랫폼에 종속적인 React Component 들을 사용한다. 간단히 웹 요소들과 모바일 앱 요소들을 아래와 같이 비교해볼 수 있다.

 

 

 

React	React Native
<div>	<View>
<span>	<Text>
<li>, <ul>	<FlastList>, 자식 아이템
<img>	<Image>

 

 

 

다른 컴포넌트들은 특정 플랫폼에서만 동작한다고 한다. 예를들어 <DatePickerIOS> 와 같은 컴포넌트는 iOS 날짜 선택기를 렌더링하는 것이다.

 

 

 

크로스플랫폼으로 개발할 수 있다는 점, Live Reload, Code-push 등의 장점과 라이브러리의 상대적인 부족함, 잦은 개발환경의 변화 등의 단점을 지닌 React Native 에 대해서 간단하게 알아보았다. 다음 시간에는 개발환경을 구축하고 본격적으로 코드를 작성해보는 시간을 가질 예정이다.

 

 

 

 

 

 

Reference:

빠른 모바일 앱 개발을 위한 React Native