1장 리액트 네이티브란?

• 2015년 페이스북에 의해 공개된 오픈소스
• 사용자 인터페이스를 만드는 리액트에 기반
• iOS와 안드로이드에서 동작하는 네이티브 모바일(Native Mobile) 어플리케이션을 만드는 자바스크립트 프레임워크
• 무려 페이스북, 인스타그램, 핀터레스트, 월마트 등이 리액트 네이티브로 개발됨
  • 리액트 네이티브 쇼케이스에서 확인할 수 있다
• 리액트 네이티브는 장점과 단점이 확실하기 때문에 만들고자 하는 애플리케이션의 특성이나 팀의 상황을 보고 결정하는 것이 좋음

1.1 리액트 네이티브의 장점과 단점

장점

• Objective-C나 Java를 사용하지 않고, 웹 개발자가 익숙한 기술(리액트, 자바스크립트)을 이용하여 모바일 앱 개발을 할 수 있음
• 크로스 플랫폼 프레임워크: 대부분의 코드가 플랫폼 간 공유가 가능해서 iOS와 안드로이드를 동시에 개발할 수 있음
• Fast Refresh 기능: 리액트 네이티비는 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있음

단점

• 네이티브의 새로운 기능을 사용하는 데 오래 걸림
  • 안드로이드나 iOS에서 업데이트를 통해 새로 제공하는 API를 리액트 네이티브가 지원하기까지의 시간이 걸림
• 잦은 업데이트. 한두 달 사이에 버전이 하나씩 올라가는 게 개발에 방해가 될 때도 있다
• 때문에 유지보수가 어려움. 개발 단계에서 문제가 생겼을 때 원인을 찾고 문제를 해결하는데 많은 시간이 걸림

1.2 리액트 네이티브의 동작 방식

Javascript ↔ Bridge ↔ Native

• 리액트 네이티브 에서는 기기와 통신하는 모든 자바스크립트의 기능을 분리된 스레드로 처리하면서 성능향상을 이룸
• 자바스크립트 영역
  • 자바스크립트 스레드: 자바스크립트 코드가 실행되는 장소이며 보통 리액트로 구성되어 있음
• 브릿지(Bridge)
  • 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할
  • 브릿지는 자바스크립트 스레드(thread)에서 정보를 받아 네이티브로 전달
• 네이티브 영역
  • 메인 스레드: UI를 담당
  • 섀도(shadow) 스레드: 레이아웃을 계산하는 데 사용하는 백그라운드 스레드
  • 네이티브 모듈: 각 모듈에는 자체 스레드가 있는데, 안드로이드의 경우 thread pool을 공유

가상 DOM

가상 DOM을 이해하기 전에 DOM의 개념부터 이해할 필요가 있다. (자세한 내용은 MDN)

• DOM은 문서 객체 모델(The Document Object Model)로 HTML, XML 문서의 프로그래밍 interface
• DOM은 문서의 구조화된 표현을 제공
• 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있음
• 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용될 수 있게 연결하는 역할
• DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 통해 DOM을 수정할 수 있음

가상 DOM이란?

• 실제 DOM은 우리가 보는 화면에 나타나는 DOM
• 가상(virtual) DOM은 화면에 보이지 않지만 비교를 위해 존재하는 DOM
  • 데이터가 변할 경우 자동으로 화면을 다시 그리는 역할
    1. 데이터에 변화가 생김
    2. 변화된 데이터를 이용하여 가상 DOM을 그림
    3. 가상 DOM과 실제 DOM을 비교하여 차이점을 확인
    4. 차이점이 있는 부분만 실제 DOM에 적용하여 그림

JSX (JavaScript XML)

• 자바스크립트 확장 문법으로 XML과 매우 유사함
• JSX가 자바스크립트보다 가독성이 좋음
  • 자바스크립트 코드 안에 UI 작업을 할 때 가독성이 좋기 때문에 리액트에서 많이 사용됨
• JSX는 오류 검사에도 좋음
• JSX로 작성된 코드는 바벨(Babel)을 사용하여 자바스크립트로 변환함

+ 리액트 네이티브 웹

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