[React-Native] (2) 리액트 네이티브 다루기

0. 리액트 네이티브는 어떻게 동작할까?

• 리액트에서 가상(Virtual) DOM은 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어에 해당한다.
• 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서는 반드시 브라우저의 DOM을 수정해야한다. 이는 값비싼 동작으로, 과도한 DOM수정은 심각한 성능 저하를 유발한다.
• 그러나!! 리액트는 페이지의 변화를 바로 렌더링하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링한다.
• 브라우저의 DOM으로 렌더링하는 대신에 리액트 네이티브는 objective-C API를 호출하여 iOS 컴포넌트로 렌더링하고, 자바 API를 호출하여 안드로이드 컴포넌트를 렌더링한다.
• 이는 리액트 네이티브의 '브리지'가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 때문에 가능한 일이다.
• 리액트 네이티브에서 마크업은 대상 플랫폼에 맞춰서 전환된다. 예를 들어 <View> 는 iOS의 경우 UIView가 된다.

---

1. 렌더링 라이프사이클

• 브라우저에서 리액트가 동작할 때, 렌더링 라이프 사이클은 우리가 작성한 리액트 컴포넌트를 마운팅하면서 시작한다.
• 브리지는 자바스크립트에서 바생하는 호출을 대상 플랫폼의 API와 UI 엘리먼트를 연결한다.
• 리액트 네이티브는 메인 UI스레드에서 동작하지 않기 때문에 사용자 경험에 영향을 주지 않고 비동기적으로 실행할 수 있다.

---

2. 리액트 네이티브 컴포넌트 만들기

• 리액트 네이티브로 작업할 경우 이렇게 역할에 따라 컴포넌트를 구분하여 작성하는 것은 코드를 플랫폼에 상관없이 재사용할 때 유리하다.
• 리액트 네이티브에서 <View>컴포넌트는 iOS에서는 UIView로 렌더링되고 안드로이드에서는 View로 렌더링된다.

---

3. JSX

• 리액트 네이티브에서도 리액트와 동일하게 JSX(JavaScript XML)을 이용하여 뷰를 만든다.
• JSX는 기술에 따라 코드를 분리하기보다는 하는 일에 따른 분리하는 것을 더 중요하게 생각했다.
• 리액트 네이티브의 .js파일은 사실 모두 JSX파일이다.

---

4. 네이티브 컴포넌트 스타일링

• 리액트 네이티브에서는 스타일을 적용하는 하나의 표준을 사용한다.
• 리액트와 대상 플랫폼 사이의 브리지는 매우 간결하게 정리된 CSS 구현체를 가지고 있다.
• 여기에서는 flexbox 위주로 레이아웃을 한다.
• 웹 환경에서는 브라우저마다 지원하는 CSS의 범위가 다른데 리액트 네이티브는 같은 스타일 규칙을 지원하도록 강제할 수 있다.
• 리액트 네이티브는 자바스크립트 객체로 존재하는 인라인 스타일을 사용하라고 강조하고 있다.
• 스타일을 객체로 작성하는 것은 스타일시트로 작성하는 것과 다르기 때문에 스타일시트를 작성하던 기존의 습관을 버리고 새롭게 스타일을 작성하는 방법을 익혀야 한다.

---

5. 대상 플랫폼 API

• 리액트 네이티브에서는 해당 플랫폼에서만 지원하는 플랫폼 특유의 API는 사용자 경험을 만듦에 있어 중요한 열쇠가 된다.
• 모바일 API는 데이터 저장소, 위치 서비스, 카메라와 같은 하드웨어에 접근에 대한 모든 것을 포함하고 있다.
• 만약 지원하지 않는 기능을 써야 할 상황에 처하면 직접 구현해야 할지도 모른다.
• 컴포넌트를 분리하고 캡슐화하는 것은 앱을 더욱 유연하게 만들어준다.