리액트 네이티브! 리액트 네이티브가 뭔지 알아보자
리액트 네이티브는 페이스북에서 만든 오픈소스로 모바일 애플리케이션 프레임워크입니다.
모바일 크로스 플랫폼으로 프로그래밍 언어(Javascript)로 IOS와 안드로이드 모바일 앱을 동시에 개발할수 있는 오픈소스입니다.
예를 들면, IOS 앱을 개발하기 위해선 Object-C 또는 Swift를 배워야하고, 안드로이드 앱을 개발하기 위해선 Java 또는 Kotlin을 배워야 합니다. 앱을 하나 만드는데 각각의 모바일마다 개발하는 언어가 다르다?! 앱은 어렵다고 생각할꺼에요. 이 점을 좀더 쉽게 개발할수 있게 하이브리드 웹앱 이라는 방법이 있습니다.
하이브리드 웹앱
하이브리드 웹앱이란 모바일 웹 브라우저위에서 동작하고, 이 웹 브라우저를 네이티브 기능으로 감싸서 앱을 제공합니다. UI(화면)는 웹 브라우저로 제공하고, 사진, 위치 정보, 파일 저장등 모바일에서 사용하는 기능을 웹 브라우저로 접근할수 있개 만들어주는겁니다. 하지만 하이브리드 웹앱은 단점이 있습니다. 그건 네이티브 앱보다 성능이 떨어진다는 문제였습니다.
하이브리드 웹앱의 성능문제를 해결하기 위해 우리가 알아보는 리액트 네이티브가 나왔습니다.
리액트 네이티브가 동작하는 자바스크립트 스레드는 네이티브 브릿지라는 걸 통해 네이티브 스레드와 통신하면서 기존의 하이브리드 웹앱과 전혀 다르게 성능을 최적화 시켰습니다.
리액트 네이티브의 장점
그럼 이제 리액트 네이티브의 장점을 알아보겠습니다.
첫째, 소스코드의 공유와 재사용이 얼마든지 가능합니다. 리액트 네이티브는 리액트에서 파생된 개발 언어 입니다. 그렇다면, 리액트 네이티브에서 사용한 소스는 웹에서도 80~90% 정도는 재사용이 가능합니다. 또한 컴포넌트을 기반으로 개발을 하기 때문에 그 컴포넌트를 활용하여 소스코드의 재사용률을 극대화 시켰습니다.
둘째, 진입 장벽이 낮다. 리액트 네이티브는 자바스크립트 기반이기 때문에 웹 개발자나 자바스크립트 개발자라면 크게 어렵지 않게 언어를 배울수 있다는 것입니다.
셋째, 생산성! 리액트 네이티브는 컴포넌트 기반이라 컴포넌트를 최대한 활용하는 방식으로 생산성을 향상 시킬수 있습니다.
넷째, 일관성! 리액트 네이티브로 모바일 앱을 개발하면 IOS와 안드로이드 앱을 일관성 있게 개발이 가능합니다.
다섯째, 비용! 하나의 서비스를 모바일 앱으로 제공하기 위해서는 IOS와 안드로이드 앱을 각각 개발할 개발자가 필요합니다. 하지만 리액트 네이티브는 하나의 소스로 두 모바일 앱을 전부 개발할수 있고, 문제가 발생시 하나의 소스만 수정하면 되므로 유지보수 비용도 줄일수 있습니다.
여섯째, 오픈소스로 누구나 이용가능하다. 누구나 수정, 배포, 상업적으로 사용이 가능하며, 오픈소스 개발자 커뮤니티가 활발하게 활성화 되어있습니다.
리액트 네이티브 단점
자 이제 장점을 알아봤으니 리액트 네이티브의 단점을 알아보겠습니다.
첫째, 리액트 네이티브 만의 개념과 개발 방식이 존재한다. 앞서 말했듯이 리액트 네이티브는 자바스크립트 기반입니다. 하지만 리액트 네이티브 만의 구조와 개발 방식이 있기 때문에 어느정도 공부를 해야합니다.
둘째, 성능 문제! 리액트 네이티브는 네이티브 앱 개발 방식이 아닙니다. 물론 하이브리드 웹앱보다는 성능이 뛰어나나 네이티브 앱보다는 성능이 떨어질수 있습니다.
셋째, 오픈소스! 오픈소스는 장점도 있지만 단점도 존재합니다. 오픈소스로 공개된 다른 개발자의 소스를 사용할 경우 생산성은 향상 되지만, 버그가 발생시 그 버그를 수정할때까지 기다려야 합니다.
넷째, 네이티브 기능! 대부분의 네이티브 기능은 구현이 가능하지만, IOS와 안드로이드의 각각의 고유의 기능은 각자 개발해 주어야 합니다.
다섯째, 업데이트 문제가 발생할수 있다. 리액트 네이티브의 버전이 업데이트 되거나, IOS나 안드로이드 버전이 업데이트 되었을시 그에 맞는 기능을 수정해야 할 수도 있습니다.
리액트 네이티브를 배워야 하는 이유
리액트 네이티브는 빠르게 IOS와 안드로이드 앱을 만들수 있으며, 거기에 웹까지 만들수 있다는 충분한 장점이 있습니다.
앞으로 지속적으로 공부를 하며, 나만의 서비스를 개발하여 리액트 네이티브만의 매력을 배워볼 생각입니다.
배운 내용들은 블로그에 지속적으로 공유를 할 예정입니다.
'리액트 > React native' 카테고리의 다른 글
[React native] JSX 알아보기 (0) | 2022.09.04 |
---|---|
[React native] 리액트 네이티브 개발환경셋팅 간단하게 해보기 (0) | 2022.09.02 |