[React-native 기록] 1. React Native 란?
오늘은 React native 에 대하여 알아 보도록 하겠습니다.
리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.
안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어
리액트를 사용할 수 있게 한다.
동작 원리는 리액트 네이티브가 가상 DOM을 통해 DOM을 조작하지 않는다는 점을 제외하고는 리액트와 실질적으로
동일하다. 직렬화, 비동기, 일괄 처리 브리지를 통해 네이티브 플랫폼과 통신하며 종단 장치에 직접 백그라운드 프로세스로 실행된다.
출처 : 위키백과
리액트 네이티브의 동작방식
리액트 네이티브에는 자바스크립트 코드랄 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할을 하는
브릿지(bridge) 가 있습니다.
브릿지는 자바스크립스 스레드(Thread)에서 정보를 받아 네이티브로 전달합니다.
자바스크립스스레드는 자바스크립트 코드가 실행되는 장소이며 보통 리액트 코드로 구성되어 있습니다.
네이티브 영역에는 UI 를 담당하는 메인(Main)스레드가 있고
레이아웃을 계산하는 데 사용하는 백그라운드 스레드인 섀도(Shadow)스레드가 있습니다.
네이티브 모듈도 있는데, 각 모듈에는 자체 스레드가 있습니다. 안드로이드의 경우 스레드 폴 을 공유합니다.
리액트의 동작 방식을 이해하기 위해서는 데이터가 변할 경우
'자동으로 화면을 다시 그리는' 리액트 가상DOM에 대한 이해가 필요합니다.
데이터가 변했을 경우 화면이 다시 그려지는 과정은 다음과 같습니다.
- 데이터 변화가 있습니다.
- 변화된 데이터를 이용하여 가상 DOM을 그립니다.
- 가상 DOM과 실제 DOM을 비교하여 차이점 확인
- 차이점이 있는 부분만 실제 DOM에 적용
즉 간단히 말하자면 변동된 코드가 있을경우 비교하여 달라진점을 적용한단 것 이고
실제 DOM 은 우리가 보는 화면에 나타나는 DOM 이고
가상 DOM은 화면에는 보이지 않지만 비교를 위해 존재하는 것 입니다.
추가적으로 리액트 네이티브의 장단점을 얘기 해보자면
장점
- 안드로이드 , ios 의 개발을 할 경우 네이티브가(독자적인) 아닌 크로스 플랫폼을 지원하기에 동시 개발이 가능
- React를 배운 개발자라면 금방 익숙해질 수 있을만큼 유사한 문법
- Hot- Reload를 지원하기 때문에 수정한 코드가 적용된 화면을 바로 볼수있음
단점
- 크로스 플랫폼이어도 결국 지원하지 않는 네이티브 기능을 사용하기 위해선 Android 와 ios 의 개발 지식 또한 필요합니다.
- 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네이티브 개발 방식보다는 성능이 떨어집니다
- 오픈 소스이기 때문에 업데이트가 자주 발생합니다. 업데이트시 수정된 기능들 때문에 버그가 발생할 수 있습니다.
React를 사용 하는 웹 사이트 중에서는
넷플릭스 , 디스코드 , 트위터 , 페이스북 , 인스타그램 등등이 있는데요
깔끔한 UI 를 제공하면서 매력적인 프레임 워크라고 생각이 듭니다.
이상 간단하게 React-Native에 대하여 알아 봤습니다.