[React-Native] 리액트 네이티브(React Native) 란?

React-Native

• 2015년 3월에 페이스북에 의해 공개된 오픈소스 프로젝트
• 사용자 인터페이스를 만드는 React(리액트) 에 기반을 두고 제작됨
• 웹 브라우저가 아닌 iOS와 안드로이드에서 동작하는 Native Mobile 애플리케이션을 만드는 자바스크립트 프레임워크

 

 

[ 장점 ]

• 작성된 코드 대부분이 플랫폼 간 공유가 가능해서 iOS, 안드로이드 두 플랫폼을 동시에 개발 가능
• 모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작
• 작성된 구성 요소들이 재사용 가능

[ 단점 ]

• 네이티브의 새로운 기능을 사용하는 데 오랜 시간이 걸림
• 유지보수의 어려움
• 잦은 업데이트

 

 

 

 

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

리액트 네이티브에는 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할을 하는 브릿지(Bridge)가 있다.

이미지 출처 : https://gparkkii.github.io/TIL/react-native/

브릿지는 자바스크립트 스레드(JavaScript Thread)에서 정보를 받아 네이티브로 전달한다. 자바스크립트 스레드는 자바스크립트 코드가 실행되는 장소이며 보통 리액트 코드로 구성되어 있다.

 

[Native 영역]

메인 스레드 (Main Thread) : UI를 담당

섀도우 스레드 (Shadow Thread) : 레이아웃을 계산하는 데 사용

Native Module -> 각 모듈에는 자체 스레드가 있음

 

 

 

 

 

JSX (JavaScript XML)

: 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 자바스크립트 확장 문법으로 리액트 프로젝트에서 사용

 

[특징]

- XML과 매우 유사하여 중첩된 구조를 나타내기 좋음

- 자바스크립트 코드 내에서 UI 작업을 할 때 가독성이 좋아짐

- 작성이 쉬움

 

JSX에서는 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 함