React Native 란?

이번에 어플리케이션 개발 프로젝트 2개에 참여하게 되었다.

두 앱 개발에 사용할 react native에 대해 정리하고 개발을 진행하려고 한다.

 

 

리액트 네이티브 

- 페이스북에서 공개한 오픈소스

- 사용자 인터페이스를 만드는 리액트 기반

- iOS와 안드로이드에서 동작하는 네이티브 모바일 어플리케이션을 만드는 자바스크립트 프레임워크

ex) 페이스북, 인스타그램, 핀터레스트가 이것으로 개발 

 

장점

- 웹 개발자가 익숙한 기술(리액트, 자바스크립트)을 이용하여 모바일 앱 개발을 할 수 있음

- 크로스 플랫폼 프레임워크 : 대부분의 코드가 플랫폼 간 공유가 가능해서 iOS와 안드로이드를 동시에 개발할 수 있음

- Fast Refresh 기능: 리액트 네이티비는 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있음

 

단점

- 네이티브의 새로운 기능을 사용하는 데 오래 걸림

안드로이드나 iOS에서 업데이트를 통해 신규 API를 리액트 네이티브가 지원까지 시간이 걸림

- 잦은 업데이트. 한두 달 사이에 버전이 하나씩 올라가는 게 개발에 방해가 될 때도 있다

- 유지보수가 어려움. 개발 단계에서 문제가 생겼을 때 원인을 찾고 문제를 해결하는데 많은 시간이 걸림

 

 

<리액트 네이티브 동작 방식>

Javascript ↔ Bridge ↔ Native

- 리액트 네이티브 에서는 기기와 통신하는 모든 JS의 기능을 분리된 스레드로 처리하면서 성능향상을 이룸

- 자바스크립트 스레드: 자바스크립트 코드가 실행되는 장소이며 보통 리액트로 구성되어 있음

 

브릿지(Bridge)

- 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할

- 브릿지는 자바스크립트 스레드(thread)에서 정보를 받아 네이티브로 전달

 

네이티브 영역

- 메인 스레드: UI를 담당

- 섀도(shadow) 스레드: 레이아웃을 계산하는 데 사용하는 백그라운드 스레드

- 네이티브 모듈: 각 모듈에는 자체 스레드가 있는데, 안드로이드의 경우 thread pool을 공유

DOM

- 문서 객체 모델(The Document Object Model)로 HTML, XML 문서의 프로그래밍 interface, 문서의 구조화된 표현

- 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있음

- 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용될 수 있게 연결하는 역할

- DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 통해 DOM을 수정할 수 있음

 

- DOM : 화면에 나타나는 DOM

- 가상(virtual) DOM : 화면에 보이지 않지만 비교를 위해 존재하는 DOM, 데이터가 변할 경우 자동으로 화면을 다시 그림

1. 데이터에 변화가 생김
2. 변화된 데이터를 이용하여 가상 DOM을 그림
3. 가상 DOM과 실제 DOM을 비교하여 차이점을 확인
4. 차이점이 있는 부분만 실제 DOM에 적용하여 그림

 

JSX ( JavaScript XML )

 

- 자바스크립트 확장 문법으로 XML와 비슷함

- JSX가 자바스크립트보다 가독성이 좋고 오류 검사에도 용이함

자바스크립트 코드 안에 UI 작업을 할 때 가독성이 좋기 때문에 리액트에서 많이 사용함

- JSX로 작성된 코드는 바벨(Babel)을 사용하여 자바스크립트로 변환

 

리액트 네이티브에서 리액트 네이티브 웹(React Native for web)을 발표하면서 리액트 네이티브로 웹 개발까지 가능해졌다.