[React-native 기록] 1. React Native 란?

오늘은 React native 에 대하여 알아 보도록 하겠습니다.

 

 

 

 

 

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.

안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어

리액트를 사용할 수 있게 한다.

 

동작 원리는 리액트 네이티브가 가상 DOM을 통해 DOM을 조작하지 않는다는 점을 제외하고는 리액트와 실질적으로

동일하다. 직렬화, 비동기, 일괄 처리 브리지를 통해 네이티브 플랫폼과 통신하며 종단 장치에 직접 백그라운드 프로세스로 실행된다.

 

출처 : 위키백과

 

 

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

---

리액트 네이티브 브릿지

리액트 네이티브에는 자바스크립트 코드랄 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할을 하는 

브릿지(bridge) 가 있습니다.

브릿지는 자바스크립스 스레드(Thread)에서 정보를 받아 네이티브로 전달합니다.

 

자바스크립스스레드는 자바스크립트 코드가 실행되는 장소이며 보통 리액트 코드로 구성되어 있습니다.

 

네이티브 영역에는 UI 를 담당하는 메인(Main)스레드가 있고

레이아웃을 계산하는 데 사용하는 백그라운드 스레드인 섀도(Shadow)스레드가 있습니다.

네이티브 모듈도 있는데, 각 모듈에는 자체 스레드가 있습니다. 안드로이드의 경우 스레드 폴 을 공유합니다.

 

 

 

리액트의 동작 방식을 이해하기 위해서는 데이터가 변할 경우

'자동으로 화면을 다시 그리는' 리액트 가상DOM에 대한 이해가 필요합니다.

 

데이터가 변했을 경우 화면이 다시 그려지는 과정은 다음과 같습니다.

1. 데이터 변화가 있습니다.
2. 변화된 데이터를 이용하여 가상 DOM을 그립니다.
3. 가상 DOM과 실제 DOM을 비교하여 차이점 확인
4. 차이점이 있는 부분만 실제 DOM에 적용

즉 간단히 말하자면 변동된 코드가 있을경우 비교하여 달라진점을 적용한단 것 이고

실제 DOM 은 우리가 보는 화면에 나타나는 DOM 이고

가상 DOM은 화면에는 보이지 않지만 비교를 위해 존재하는 것 입니다. 

 

추가적으로 리액트 네이티브의 장단점을 얘기 해보자면

 

---

장점

• 안드로이드 , ios 의 개발을 할 경우 네이티브가(독자적인) 아닌 크로스 플랫폼을 지원하기에 동시 개발이 가능
  
  
• React를 배운 개발자라면 금방 익숙해질 수 있을만큼 유사한 문법
  
  
• Hot- Reload를 지원하기 때문에 수정한 코드가 적용된 화면을 바로 볼수있음 

---

단점

 

 

• 크로스 플랫폼이어도 결국 지원하지 않는 네이티브 기능을 사용하기 위해선 Android 와 ios 의 개발 지식                   또한 필요합니다.
• 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네이티브 개발 방식보다는 성능이 떨어집니다
• 오픈 소스이기 때문에 업데이트가 자주 발생합니다. 업데이트시 수정된 기능들 때문에 버그가 발생할 수 있습니다.

 

 

React를 사용 하는 웹 사이트 중에서는

넷플릭스 , 디스코드 , 트위터 , 페이스북 , 인스타그램 등등이 있는데요

깔끔한 UI 를 제공하면서 매력적인 프레임 워크라고 생각이 듭니다.

 

이상 간단하게 React-Native에 대하여 알아 봤습니다.