[React Native] React Native란?

React Native를 활용하는 강의를 수강하는 중인데 정작 React Native에 대해 무지하다는 생각이 들어 강의가 본격적으로 시작되기 전에 공부하고자 한다.

 

---

 

1. React Native란?

React Native란 이름에서 알 수 있듯이 React를 기반으로 만들어진 javascript 기반의 프레임워크로, 크로스 플랫폼 앱 개발을 가능하게 한다.
 

(1) 크로스 플랫폼 앱이란?

크로스 플랫폼 앱은 하나의 소스 코드로 Android, ios에서 똑같이 작동하는 앱을 의미하며, 네이티브 앱과는 대조되는 개념이다.
 
네이티브 앱은 각 운영 체제(Android, ios)에 맞춰 따로 개발 및 운영이 필요하다.
어떻게 보면 당연한 게 각 앱마다 사용하는 프로그래밍 언어도 다르고 개발하는 플랫폼도 다를 것이기 때문이다.
 
이런 한계점을 개선하고자 생긴 게 크로스 플랫폼 앱이다.
크로스 플랫폼 앱에는 대표적으로 React Native, Flutter가 있다고 한다.
 

2. React VS React Native

그렇다면 크로스 플랫폼 앱이라는 것을 제외하고 React와 어떤 점이 다를까?

	React	React Native
UI 렌더링	브라우저	ios, Aos
DOM 조작	필요	불필요
CSS 스탕일링	CSS, Sass 등	Flexbox, Stylesheet
모바일 하드웨어 접근	불가능	가능
라이브러리	React DOM, React Router 등	React Native, Expo 등

 

(1) UI 렌더링

React는 웹이기에 브라우저에서 동작하는 반면,
React Native는 크로스 플랫폼 앱이기에 ios나 Aos같은 모바일 환경에 맞춰 동작하게 된다.
 
여기서 React로 앱을 만드는 경우에는 웹사이트를 Webview로 띄우는 방식으로 진행되기에
실제 네이티브 코드가 되는 React Native와 차이점이 있다.
 

(2) DOM 조작

React는 DOM을 조작하는 방식으로 UI를 업데이트하지만
React Native는 javascript와 네이티브 모듈을 사용하여 네이티브 UI 구성 요소를 조작하게 된다.
 

(3) CSS 스타일링

React Native는 웹이 아니기에 CSS 스타일이 아닌, Flexbox나 Stylesheet를 사용한다.
이 때 웹에서 사용하는 컴포넌트도 사용하지 않는데 예를 들어 div나 input과 같은 웹 컴포넌트가 아니라
View나 Text같은 Native UI 컴포넌트를 사용한다.
 

(4) 모바일 하드웨어 접근

React Native는 말 그대로 네이티브이기에 디바이스에 있는 다양한 하드웨어 API가 있다면 모두 제공받을 수 있다.
 

(5) 라이브러리

위 그림을 통해 React Native가 어떻게 하나의 코드로 iOS와 Android 앱 개발이 가능한지 알 수 있는데
바로 React Native와 네이티브 사이에 있는 Bridge를 통해 가능한 것이다
 
이 Bridge를 통해 javascript 코드를 네이티브 코드로 변환해서 컴파일하고 이를 통해 네이티브 UI에 접근할 수 있다.
 

---

 
아직은 본격적으로 사용해보지 않아서 이론적으로만 이해한 상태이고 찾아보니 한국에서는 React Native에 다룬 블로그가 잘 없는 것 같아 아쉽다.
앞으로 강의를 들어나가며 추가로 알게 된 점이나 생각들을 업데이트할 생각이다.
 
[레퍼런스]
https://blog.imqa.io/react-native/

React 아니고 React Native요! (React Native 지원)