리액트 네이티브의 작동 방식 이해하기
JSX
리액트와 리액트 네이티브 모두 JSX를 사용하는 것이 좋다. JSX는 기본적으로 XML처럼 보이는 자바스크립트의 구문 확장이다. 리액트 컴포넌트를 만들면서 JSX가 없어도 되지만, JSX를 사용하면 리액트와 리액트 네이티브는 훨씬 가독성이 좋아지고 유지하기도 쉬워진다.
스레드 처리
네이티브 기기와 통신하는 모든 자바스크립트의 기능은 분리된 별도의 스레드로 처리된다. 때문에 사용자는 모든 스크립트의 동작은 네이티브 플랫폼과의 인터랙션에서 별도의 스레드로 처리된다. 이 때문에 UI 와 Animation 구동이 별도의 간섭없이 자연스럽게 보이게 된다. 리액트 네이티브 앱 내에서 실행되는 스레드는 API 호출과 터치 이벤트, 인터랙션을 처리한다. 네이티브 안쪽의 변화가 필요할 때는 일괄처리해서 네이티브쪽으로 전달하게 된다. 이러한 작업은(리액트 네이티브의) 이벤트 루프의 마지막 단계에서 매번 이루어지게 된다. 이 때문에 대부분의 경우 리액트 네이티브 앱은 비즈니스 로직을 자바스크립트의 스레드 레벨에서 처리한다.
리액트
리액트 네이티브의 가장 큰 특징은 리액트를 사용한다는 것이다. 리액트는 오픈 소스 자바스크립트 라이브러리로 페이스북이 지원한다. 리액트는 본래 웹 앱을 만들고 웹 문제를 해결하기 위해 만들었다. 리액트는 출시 이후 랜더링 속도와 유지, 선언적 UI 등 때문에 많은 개발자로부터 주목을 받았다.
기존의 DOM을 통한 조작은 느리고 성능이 떨어져서 최소화해야 했다. 리액트는 가상DOM(virtual DOM)을 사용해 기존 DOM 을 대체한다. 가상DOM(virtual DOM)이란 메모리에 있는 실제 DOM의 복사본이다. 변경 전과 후의 가상DOM(virtual DOM)을 비교해 차이만 실제 DOM에 적용 하는 방식이다. 이러한 방식으로 필요한 부분만 갱신하여 DOM 의 연산을 줄이게 된다.
단방향 데이터 흐름
리액트와 리액트 네이티브에서는 단방향 데이터 흐름을 강조한다. 단방향 데이터의 흐름은(양방향 데이터 흐름 구조에 비해) 단순하므로 리액트 네이티브로 작성된 모든 애플리케이션에서 사용된다.
디핑(코드 비교)
리액트는 코드를 비교하고, 이를 네이티브 컴포넌트에 반영한다. 이 방식은 우리의 UI와 네이티브 컴포넌트를 갱신하는 스레드에 최소한의 데이터를 전달할 때 사용한다. UI는 컴포넌트의 상태에 기반을 두고 태그 등을 이용해서 선언적으로 랜더링되고, 리액트는 비교를 통해서 필요한 변화를 브리지를 통해서 전달한다.
브리지 - 리액트 네이티브는 네이티브 계층과의 통신을 위해 각 플랫폼과의 중간 통로 역할을 하는 브리지라는 것을 이용!
리액트 네이티브의 강점
리액트 사용
리액트 네이티브는 리액트를 사용한다는 점이 강점이다. 리액트도 페이스북이 지원하는 오픈 소스 프로젝트이다. 깃허브를 보면 리액트와 관련해 10만 개 이상의 Star가 달려 있고, 1200 명 이상의 Contributor들이 있다. 이는 그만큼 관심이 많고 프로젝트에 많은 커뮤니티가 참여하고 있다는 것이다. 이로 인해 리액트 개발자나 프로젝트 관리자로 일하기가 쉽다. 리액트는 페이스북이 개발/관리/사용하기 때문에 유능한 엔지니어들이 감독/추진하고 기능을 추가하므로 금방 사라지지 않을 것이다.
개발자 가용성
개발자 생산성
개발자 경험
성능
단방향 데이터 흐름
다른 자바스크립트 프레임워크나 MVC 프레임워크와 다르게 리액트 네이티브는 단방향 데이터 흐름을 채택했다. 리액트에서는 최상위 컴포넌트에서 아래 모든 방향으로 단방향 데이터 흐름이 만들어진다. 이로 인해 앱은 이해하기 쉬워진다. 애플리케이션에 대한 데이터가 여기저기 흩어진 형태가 아니라 데이터의 계층 구조가 하나의 방식이기 때문이다.
[단방향 데이터 흐름이 작동하는 방식]
트랜스파일링
트랜스파일링(transpilation) 이란 트랜스파일러(transpiler)가 특정 프로그램 언어로 작성된 소스 코드를 받아서 다른 프로그램 언어로 코드를 변환해 주는 것 이다.
새로운 ECMA 스크립트의 표준과 기능들이 나오면서 아직은 새로운 기능들을 지원하지 못할 때 주로 사용된다. 자바스크립트 경우만 하더라도 트랜스파일링해서 표준 자바스크립트를 만들면 이전 버전만 처리 할 수 있는 플랫폼에서도 새로운 기능의 코드를을 사용할 수 있다.
리액트 네이티브는 트랜스파일링 과정에서 기본적으로 내장된 바벨(Babel)을 사용한다. 바벨은 트랜스파일링 오픈 소스 도구로 최신 자바스크립트 언어의 기능까지도 바로 사용할 수 있도록 코드를 변환해 준다. 개발자가 바벨에 추가하기만 하면 즉시 원하는 기능을 사용할 수 있다.
예를 들어 자바스크립트 클래스와 Arrow Function, 객체 구조 분해 할당(object destructuring, 객체 비구조화) 는 아직 브라우저와 런타임 모두에 적용되지 않았다. 하지만 바벨과 리액트 네이티브를 사용하면 개발자는 이런 기능들이 제대로 작동하는지 걱정하지 않으면서도 바로 사용할 수 있다.
