React , React Native 에 관한 배경 및 지식 for 잘난 척

컴퓨터 공학을 전공하거나 컴퓨터를 좀 배워보신 분들이시라면 React, Angular라는 말을 많이들 들어보셨을 것입니다.

React 출처 : https://ms314006.github.io/static/b7a8f321b0bbc07ca9b9d22a7a505ed5/97b31/React.jpg / angular 출처 : https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png

최근 크로스 프레임워크(cross framework)라는 부분이 수면위로 떠올라 화제가 되고 있는 중인데 이 크로스 프레임위크의 두 축을 담당하는 플러터(Flutter)와 리액트 네이티브(React Native)라는 것도 아마 접해보신 분들이 계실 거구요.

출처는 최하단에 표기하였습니다.

React란 React JS라고도 부르며 쉽게 설명드리면 하나의 라이브러리(library)입니다. 

파이썬이나 여러 다른 언어에서 import 등을 통해 가져오는 그런 라이브러리 말입니다. 

소스파일이 무료로 공개가 되어있는 오픈 소스 라이브러리이며 언어는 자바스크립트를 사용합니다.

이 리액트가 앞으로도 전망이 좋은 언어인데 그 이유는 세계적으로 가장 인기있는 sns 회사 중 하나인 페이스북이 이 리액트를 지원하고 개발중에 있기 때문입니다.

https://www.simplilearn.com/ice9/free_resources_article_thumb/React_Native_Tutorial.jpg

React Native란 단순히 라이브러리에 국한된 React JS를 위한 프레임워크(framework)입니다.

이 리액트 네이티브의 특징은 바로 크로스 프레임워크라는 점인데 이는 하나의 언어로 iOS, 안드로이드 둘 다 똑같이 실행이 가능하도록 한다는 장점이 있습니다.

기존에 어떤 앱을 개발하여 출시를 할 때 애플의 앱스토어와 구글의 플레이스토어에 어플을 올릴 때 똑같은 어플리케이션을 두 개를 만들어야하는 번거로움이 있었습니다.

 

하나는 iOS를 스위프트(swift) 혹은 오브젝트씨(Objective-C)라는 언어를 이용하여 만들어야했고 또 하나는 android를 java나 코틀린(kotlin)이라는 언어를 통해 만들어야했죠.

하나의 어플을 만드려고 하는데 무려 두 가지 다른 언어로 똑같은 앱을 만드는 건 비용적으로나 시간적으로나 너무나 손해였습니다.

 

기업의 입장에서도 어플 하나를 만들기 위해 개발자를 두 명이나 고용해야헸습니다.

 

안드로이드의 경우 전 세계의 75퍼센트나 차지를 하기 때문에 당연히 수요가 높아서 공급도 덩달아 높았습니다.

당연히 개발자가 넘쳐났지요.

 

문제는 iOS였습니다.

iOS의 경우에는 안드로이드의 3분의 1수준으로 상대적으로 적기에 당연히 개발자도 적었고 현재도 적습니다.

개발자 수가 적은 만큼 안드로이드 개발자보다 높은 급여를 지급하여야 하죠.

 

그러나 크로스 프레임워크인 플러터나 리액트 네이티브를 이용한다면 한 명의 개발자, 1개의 어플만 개발해도 충분하죠.

심지어 프론트엔드 웹 프레임워크 3대장 중 하나인 앵귤러(angular)도 앵귤러 네이티브라는 것을 개발중에 있다고 합니다.

https://i.ytimg.com/vi/lumqZlnDs_I/maxresdefault.jpg

이상으로 잘난 척 할 수 있는(?) 약간의 정보였습니다.

감사합니다.

 

React Native 이미지 출처: https://media.vlpt.us/images/dojunggeun/post/844467ba-3be9-4c53-a9ea-39340dca558f/React-Native-Titre.png /

flutter 이미지 출처 : flutter-ko.dev/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb7ad42688a7fdaea1270ccf6bbf4f34b7e03f.svgflutter-ko.dev/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb7ad42688a7fdaea1270ccf6bbf4f34b7e03f.svgflutter-kr.io/images/flutter-logo-sharing.png