<div id="readability-page-1" class="page"><div id="kakaoContent">

 <div>
 <a href="/m/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EA%B8%B0%ED%83%80">프로그래밍/기타</a><h2>React Native를 소개합니다</h2>
 <cite>
 그랩 자유로운 오랑우탄
 </cite>
 </div>
 <time>2018. 7. 9. 00:37</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 

 
 <div>
 
<h2>안녕하세요!&nbsp;안드로이드,IOS 개발을 하다&nbsp;React Native에 푹빠진 학생입니다. Facebook이 만든 자바스크립트&nbsp;라이브러리&nbsp;React.js&nbsp;는 현재 한국에서도 크게 인기입니다. 반면 React Native는 아직까지 한국에서는 자료가 적고 인기도 적은 편입니다. 본 포스팅에서는 React Native에 대해 알아볼 것이며 장점과 단점에 대해서도 알아보도록&nbsp;하겠습니다.</h2>


<h5>React란?</h5>
<figure width="400" data-origin-width="400" data-origin-height="225" data-ke-mobilestyle="widthContent"><img src="https://blog.kakaocdn.net/dn/owRK4/btq2M3obAHh/JOj7GV7pMvID97OENC1ZjK/img.jpg" width="400" data-origin-width="400" data-origin-height="225" data-ke-mobilestyle="widthContent"></figure>

React.js는 프론트엔드 개발자라면 한 번쯤은 들어봤을 겁니다. Facebook에서 마음먹고 개발한 React.js는 요새&nbsp;웹사이트 개발을 할 때 가장 많이 쓰이는 라이브러리 중 하나입니다. Facebook, Instagram, Uber, Evernote 등 짱짱한 기업들이 React를 도입했다고 하니 충분히 검증됐다고 봐도 되겠죠?&nbsp;


React.js가 현재 프론트엔드 개발자들의 사랑을 받게된 이유는 유연하다는 점입니다. Angular.js 같은 프레임워크가 아닌 라이브러리이기 때문에 필요에 따라&nbsp;붙이고 땔&nbsp;수 있습니다. 이 말은 웹을 만드는데 꼭 필요한 도구를 제공해주지 않는다는 것입니다. 그 대신 React의 규칙(컴퍼넌트, JSX)을 제공해 줍니다. 이 규칙들을 통해 개발자는&nbsp;React 이전의 대세인&nbsp;Jquery보다 더 효율적이고&nbsp;가볍게 웹을 제작할 수 있게 되었습니다.





<h5>React Native란?</h5>

<figure width="400" data-origin-width="400" data-origin-height="225" data-ke-mobilestyle="widthContent"><img src="https://blog.kakaocdn.net/dn/bgCciD/btq2P3nmsir/STUTDBIh4EyHTy3VH4KST1/img.png" width="400" data-origin-width="400" data-origin-height="225" data-ke-mobilestyle="widthContent"></figure>

위에서 언급했던 React와 이름이 매우 비슷하죠? 예상했듯이, React Native는 리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다! 쉽게 이야기하면 React의 규칙을 이용하여 모바일 어플리케이션 개발을 할 수 있다는 말입니다.&nbsp;

일반적으로 '앱'을 개발하기 위해서는 안드로이드의 경우 Android(Java), 아이폰의 경우 IOS(Swift&nbsp;|| Objective C) 를 사용해야 합니다. 이 때&nbsp;안드로이드, IOS 개발을 따로 하는 경우&nbsp;Native&nbsp;개발을 한다고 이야기합니다. 그러나 빠르게 앱을 만들어 시장 반응을 보려 하는&nbsp;스타트업과 같은 곳에서는 두가지를 동시에 개발하기에는 인력과 시간 소모가 크겠죠. 이에 Android , IOS 어플리케이션을 동시에 개발할 수&nbsp;있는&nbsp;하이브리드&nbsp;앱이 나오게 되었습니다(대표적인 예로 Ionic). 그러나 하이브리드 앱의 경우 웹뷰를 네이티브에 씌우는 형태이기 때문에 속도가 느리고 큰 규모의&nbsp;프로젝트에는 적합하지 않습니다.&nbsp;


그래서 React Native가 나오게 되었습니다. 

* React Native 홈페이지에서 소개글을 읽어보면..

<blockquote data-ke-style="style2">React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.</blockquote>

React.js와 동일한 디자인으로&nbsp;모바일 앱을 개발할 수 있다는 것을 강조하고 있죠?(오로지 javascript만을 사용해서 말이죠!)&nbsp;
<div>

<figure width="400" height="232" data-origin-width="400" data-origin-height="232" data-ke-mobilestyle="widthContent"><img src="https://t1.daumcdn.net/cfile/tistory/9964614B5B42219C01" width="400" height="232" data-origin-width="400" data-origin-height="232" data-ke-mobilestyle="widthContent"></figure></div>
여기서 React Native는 하이브리드 앱, 즉 아이오닉과 같은&nbsp;웹뷰가 포팅된 형태의 어플리케이션이 아닙니다.
위 그림과 같이 javascript로 코딩한 React의 컴포넌트는 React Native 플랫폼을 거쳐 IOS, Android Native 코드로 각각 변환됩니다. 이 말은 우리는 각각의 OS에 맞춰 앱을 만들지 않아도 되고,&nbsp;Javascript 하나만으로 앱 제작이 가능하다는 것입니다.



<figure width="580" height="290" data-origin-width="580" data-origin-height="290" data-ke-mobilestyle="widthContent"><img src="https://t1.daumcdn.net/cfile/tistory/993BD2425B4225671C" width="580" height="290" data-origin-width="580" data-origin-height="290" data-ke-mobilestyle="widthContent"></figure>

React Native 다큐먼트에 소개되어 있는 샘플 코드입니다. 왼쪽 코드에서 Text 컴포넌트가 보이는데, React Native의 Bridge를 통해&nbsp;안드로이드의&nbsp;TextView, IOS의&nbsp;UITextView로 변환됩니다! 그리고 동일한 결과물을 보여주게 되죠!

<div><h5>React Native 장점.</h5>
</div>
1. 플랫폼 별 언어를 몰라도&nbsp;Javascript만 알고 있어도 앱을 만들 수 있다.
&nbsp;현재 RN이 점점 발전하여 왠만하게 쓰이는 기능들은 다 서드파티 모듈이나 EXPO에서 제공을 해주고 있습니다.&nbsp;

2. 개발 속도가 빠르다.
생산성이 높은 편이며,&nbsp;개발하면서 바로 결과를 확인할 수 있게 Live Reloading을 제공해줍니다.다(Android, IOS는 코드를 변경할 때마다 빌드를 새로 해줘야 한다죠)

3. 성능이 좋다(상대적)
위에서 언급했다시피 하이브리드 앱보다는 속도가 월등히 빠릅니다.

4. 리소스가 풍부하다
짧은 역사임에도 불구하고 높은 퍼포먼스와 생산성으로 인해 개발자들의 질의응답이 매우 활발한 편입니다. (원인 모를 에러가 가끔 나서 답변이 없는 질문들도 있지만..) 즉 구글과 함께 신나는 에러를 잡을 수 있습니다.



<h5>React Native 단점.</h5>

1. React Native가&nbsp;제공하는 기능은 한계가 있다.
내가 필요한데 RN에는&nbsp;없는 기능이라면&nbsp;직접 Native로 제작해야 할 수 있다. 그렇게 되면 Android, IOS를 모두 할 줄 알아야 됩니다.&nbsp;

2. 영어가 약하면 힘들 수 있다.&nbsp;
아직까지 한국의 React Native&nbsp;커뮤니티는 작습니다. 대부분 문서들과 질의응답은 전부 영어로 되어있습니다.

3. 성능 이슈
크로스 플랫폼 앱의 특징이죠. 아직까지는 완전하게 Native를 대체할 수 없나 봅니다.&nbsp;
비즈니스 로직이 많이 복잡하거나 뷰 스택이 높게 쌓이게 된다면 속도는 느려진다고 합니다.



다음 포스팅에서는 React Native를 시작하는 방법들에 대해 알아보도록 하겠습니다 안녕!
 
 
											
					
 
 
 </div>

 
 
 
 
 
 


 

 
 
 
 </div></div>

그랩의 블로그

안녕하세요! 안드로이드,IOS 개발을 하다 React Native에 푹빠진 학생입니다. Facebook이 만든 자바스크립트 라이브러리 React.js 는 현재 한국에서도 크게 인기입니다. 반면 React Native는 아직까지 한국에서는 자료가 적고 인기도 적은 편입니다. 본 포스팅에서는 React Native에 대해 알아볼 것이며 장점과 단점에 대해서도 알아보도록 하겠습니다.
 
 
React란?
 
React.js는 프론트엔드 개발자라면 한 번쯤은 들어봤을 겁니다. Facebook에서 마음먹고 개발한 React.js는 요새 웹사이트 개발을 할 때 가장 많이 쓰이는 라이브러리 중 하나입니다. Facebook, Instagram, Uber, Evernote 등 짱짱한 기업들이 React를 도입했다고 하니 충분히 검증됐다고 봐도 되겠죠? 
 
 
React.js가 현재 프론트엔드 개발자들의 사랑을 받게된 이유는 유연하다는 점입니다. Angular.js 같은 프레임워크가 아닌 라이브러리이기 때문에 필요에 따라 붙이고 땔 수 있습니다. 이 말은 웹을 만드는데 꼭 필요한 도구를 제공해주지 않는다는 것입니다. 그 대신 React의 규칙(컴퍼넌트, JSX)을 제공해 줍니다. 이 규칙들을 통해 개발자는 React 이전의 대세인 Jquery보다 더 효율적이고 가볍게 웹을 제작할 수 있게 되었습니다.
 
 
 
 
React Native란?
 
위에서 언급했던 React와 이름이 매우 비슷하죠? 예상했듯이, React Native는 리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다! 쉽게 이야기하면 React의 규칙을 이용하여 모바일 어플리케이션 개발을 할 수 있다는 말입니다. 
 
일반적으로 '앱'을 개발하기 위해서는 안드로이드의 경우 Android(Java), 아이폰의 경우 IOS(Swift || Objective C) 를 사용해야 합니다. 이 때 안드로이드, IOS 개발을 따로 하는 경우 Native 개발을 한다고 이야기합니다. 그러나 빠르게 앱을 만들어 시장 반응을 보려 하는 스타트업과 같은 곳에서는 두가지를 동시에 개발하기에는 인력과 시간 소모가 크겠죠. 이에 Android , IOS 어플리케이션을 동시에 개발할 수 있는 하이브리드 앱이 나오게 되었습니다(대표적인 예로 Ionic). 그러나 하이브리드 앱의 경우 웹뷰를 네이티브에 씌우는 형태이기 때문에 속도가 느리고 큰 규모의 프로젝트에는 적합하지 않습니다. 
 
 
그래서 React Native가 나오게 되었습니다.
 
* React Native 홈페이지에서 소개글을 읽어보면..
 
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
 
React.js와 동일한 디자인으로 모바일 앱을 개발할 수 있다는 것을 강조하고 있죠?(오로지 javascript만을 사용해서 말이죠!) 
 
여기서 React Native는 하이브리드 앱, 즉 아이오닉과 같은 웹뷰가 포팅된 형태의 어플리케이션이 아닙니다.
위 그림과 같이 javascript로 코딩한 React의 컴포넌트는 React Native 플랫폼을 거쳐 IOS, Android Native 코드로 각각 변환됩니다. 이 말은 우리는 각각의 OS에 맞춰 앱을 만들지 않아도 되고, Javascript 하나만으로 앱 제작이 가능하다는 것입니다.
 
 
 
 
React Native 다큐먼트에 소개되어 있는 샘플 코드입니다. 왼쪽 코드에서 Text 컴포넌트가 보이는데, React Native의 Bridge를 통해 안드로이드의 TextView, IOS의 UITextView로 변환됩니다! 그리고 동일한 결과물을 보여주게 되죠!
 
React Native 장점.
1. 플랫폼 별 언어를 몰라도 Javascript만 알고 있어도 앱을 만들 수 있다.
 현재 RN이 점점 발전하여 왠만하게 쓰이는 기능들은 다 서드파티 모듈이나 EXPO에서 제공을 해주고 있습니다. 
 
2. 개발 속도가 빠르다.
생산성이 높은 편이며, 개발하면서 바로 결과를 확인할 수 있게 Live Reloading을 제공해줍니다.다(Android, IOS는 코드를 변경할 때마다 빌드를 새로 해줘야 한다죠)
 
3. 성능이 좋다(상대적)
위에서 언급했다시피 하이브리드 앱보다는 속도가 월등히 빠릅니다.
 
4. 리소스가 풍부하다
짧은 역사임에도 불구하고 높은 퍼포먼스와 생산성으로 인해 개발자들의 질의응답이 매우 활발한 편입니다. (원인 모를 에러가 가끔 나서 답변이 없는 질문들도 있지만..) 즉 구글과 함께 신나는 에러를 잡을 수 있습니다.
 
 
React Native 단점.
1. React Native가 제공하는 기능은 한계가 있다.
내가 필요한데 RN에는 없는 기능이라면 직접 Native로 제작해야 할 수 있다. 그렇게 되면 Android, IOS를 모두 할 줄 알아야 됩니다. 
 
2. 영어가 약하면 힘들 수 있다. 
아직까지 한국의 React Native 커뮤니티는 작습니다. 대부분 문서들과 질의응답은 전부 영어로 되어있습니다.
 
3. 성능 이슈
크로스 플랫폼 앱의 특징이죠. 아직까지는 완전하게 Native를 대체할 수 없나 봅니다. 
비즈니스 로직이 많이 복잡하거나 뷰 스택이 높게 쌓이게 된다면 속도는 느려진다고 합니다.
 
 
 
다음 포스팅에서는 React Native를 시작하는 방법들에 대해 알아보도록 하겠습니다 안녕!

React Native를 소개합니다

댓글