<div id="readability-page-1" class="page"><div><blockquote>
<p>요즘 개발 공부를 위해서 웹서버에 React를 설치하고, React Native로 프로젝트를 만들었습니다. 정확한 의미를 모르고 개발부터 시작하는 것 같아서 정리를 위해 작성했습니다.</p>
</blockquote>
<p><img src="https://velog.velcdn.com/images/eunjeong/post/fc9ff90d-37e1-49a4-9d10-7c68458edfea/image.png"></p>
<h2 id="react">React</h2>
<p>ReactJS는 페이스북에서 개발한 <strong>“사용자 인터페이스(UI)를 만들기 위한 자바스크립트(JavaScript) 라이브러리”</strong>입니다.</p>
<h2 id="reactjs-특징">ReactJS 특징</h2>
<ol>
<li>React는 <strong>선언형</strong>이다.<br>
리액트는 선언형 성격에 맞게 컴포넌트를 얻기 위해 &lt;tag&gt;&lt;/tag&gt; jsx문법을 통해 구현합니다. 즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않습니다. 이와 같은 선언형 특성은 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있게 하므로, 다른 부분에 대한 고민은 최소화하며 높은 생산성을 보장할 수 있도록 합니다.</li>
<li>React는 <strong>컴포넌트 기반</strong>으로 <strong>재사용성</strong>이 뛰어나다.<br>
컴포넌트는 독립적인 단위의 소프트웨어 모듈입니다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법입니다. 리액트는 웹에서 쓰는 요소를 컴포넌트로 만들 수 있게 해서 다른곳에서 다시 쓸 수 있도록 하는 높은 재사용성을 가집니다.</li>
<li>React는 <strong>Virtual DOM(가상돔)</strong>기반으로 가볍다.<br>
가상돔은 이 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM 트리가 업데이트가 필요한 경우 이를 반영하는 방식을 말합니다. 가상돔 기반이기 때문에 하나의 동작마다 매번 DOM트리가 업데이트가 일어나거나 브라우저 렌더링 과정이 일어나지 않아서 더욱 가볍습니다.</li>
<li>React 컴포넌트는 <strong>state</strong>와 <strong>props</strong>을 가진다.<br>
리액트는 UI가 사용자의 동작에 따른 UI나 Action이 필요하기 때문에 내부적으로 state와 props를 가집니다. 그래서 리액트를 잘 다루기 위해서는 state와 props에 대한 이해가 필요하고, 어떻게 구성할 것인지를 먼저 파악해야합니다.</li>
</ol>
<h2 id="react-사용이유">React 사용이유</h2>
<p>현재 많은 개발자들이 React에 열광하고 있고, 그 결과고 React 생태계는 점점 커지고 있습니다. React는 이전의 프론트엔드 도구들과는 많이 다릅니다. React는 작은 Library지만 개발자들에게 사고의 전환을 요구하는 여러가지 물음을 던집니다. 높지 않은 러닝커브로인해 툴이 아닌 자신의 개발에 집중할 수 있도록 하며 주의력 분산을 줄이게 됩니다.</p>
<hr>
<p><img src="https://velog.velcdn.com/images/eunjeong/post/ec1e77e4-d1ce-44e8-b939-ec0df65c0730/image.png"></p>
<h2 id="react-native">React Native</h2>
<p>React Native는 페이스북에서 개발한 <strong>“기본 앱 구성 요소로 컴파일되는 자바스크립트 오픈소스 모바일 프레임워크”</strong>입니다. 리액트의 접근방법을 모바일로 확장한 오픈소스 프로젝트입니다.</p>
<h2 id="react-native-배경">React Native 배경</h2>
<p>‘앱’을 개발하기 위해서 안드로이드의 경우 Android(Java, Kotlin), 아이폰의 경우 IOS(Swift, Objective C)를 사용해야 합니다. 이렇게 Android와 IOS 개발을 따로하는 경우를 Native개발을 한다고 합니다. 두가지를 동시에 개발하기에는 인력과 시간의 소모가 커서 웹뷰를 네이티브에 씌우는 형태로, 이 둘을 동시에 개발할 수 있는 하이브리드 앱이 나오게 되었습니다. 그러나 하이브리드 앱의 느린 속도와 큰 규모의 프로젝트에는 적합하지 않은 특징때문에 React Native가 나오게 되었습니다.</p>
<p>Javascript로 코딩한 컴포넌트는 React Native 플랫폼을 거쳐서 Android Native, IOS코드로 각각 변환됩니다. 즉 Javascript 하나만으로 앱 Android와 IOS앱 제작이 가능합니다.</p>
<h2 id="react-native-특징">React Native 특징</h2>
<h4 id="장점">장점</h4>
<ol>
<li>러닝 커브가 높지 않다. <strong>Javascript 만으로</strong> 앱을 만들 수 있다.<br>
가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. JavaScript를 사용하기 때문에 플랫폼 별 언어를 몰라도 앱을 만들 수 있습니다. 현재 RN(React Native)가 점점 발전하면서 쓰이는 대부분의 기능들은 모두 서드파티 모듈 등에 제공하고 있습니다.</li>
<li>소스코드의 <strong>재사용</strong>, 개발 속도가 <strong>빠르다.</strong><br>
컴포넌트 기반으로 기능들을 분리해서 재사용할 수 있는 구조로 되어있기 때문에 생산성이 높으며, 개발하면서 빌드의 과정없이 바로 결과를 확인할 수 있게 하는 Live Reloading을 제공합니다.</li>
<li><strong>오픈소스</strong>로, <strong>리소스가 풍부</strong>하다.<br>
리액트 네이티브는 오픈소스로 역사는 짧지만 높은 퍼포먼스와 생산성으로 인해 많은 개발자들이 사용하고, 그만큼 질의응답이 매우 활발합니다.</li>
</ol>
<h4 id="단점">단점</h4>
<ol>
<li><strong>기능의 한계</strong>가 있다.<br>
앱을 개발하는데 있어서 필요한 기능이 RN에 없다면 직접 Native로 제작해야 합니다. 즉, Android와 IOS를 모두 할 줄 알아야 합니다. 또한 리액트 네이티브 브릿지를 사용하여 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네이티브 개발 방식보다는 당연하게 성능이 떨어집니다.</li>
<li><strong>언어의 장벽</strong>이 있다.<br>
아직까지 한국에서 RN의 커뮤니티는 많이 작습니다. 대부분의 문서와 질의응답이 거의 모두 영어로 되어있기 때문에 영어가 약하면 개발에 어려움이 있을 수 있습니다.</li>
<li><strong>성능 이슈</strong>가 있다.<br>
비즈니스 로직이 많이 복잡하거나 뷰 스택이 높게 쌓이면 속도가 느려진다는 성능 이슈가 있습니다. 이것 외에도 원인 모를 에러발생으로 개발의 어려움도 종종 있다고 합니다. 오픈소스이기 때문에 업데이트가 자주 발생하고, 업데이트 시에 수정되는 기능들 때문에 발생하는 버그들에 대해서 항상 생각해야합니다.</li>
</ol>
<hr>
<h3 id="참고">참고</h3>
<ul>
<li><a href="https://medium.com/react-native-seoul/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-01-react-js%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-ad8ba252ee28">리액트를 처음부터 배워보자</a></li>
<li><a href="https://tansfil.tistory.com/57">React Native를 소개합니다</a></li>
<li><a href="https://firework-ham.tistory.com/102">리액트 네이티브란?장단점</a></li>
</ul></div></div>

eunjeong.log

요즘 개발 공부를 위해서 웹서버에 React를 설치하고, React Native로 프로젝트를 만들었습니다. 정확한 의미를 모르고 개발부터 시작하는 것 같아서 정리를 위해 작성했습니다.
React
ReactJS는 페이스북에서 개발한 “사용자 인터페이스(UI)를 만들기 위한 자바스크립트(JavaScript) 라이브러리”입니다.
ReactJS 특징
React는 선언형이다.
리액트는 선언형 성격에 맞게 컴포넌트를 얻기 위해 &lttag&gt&lt/tag&gt jsx문법을 통해 구현합니다. 즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않습니다. 이와 같은 선언형 특성은 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있게 하므로, 다른 부분에 대한 고민은 최소화하며 높은 생산성을 보장할 수 있도록 합니다.
React는 컴포넌트 기반으로 재사용성이 뛰어나다.
컴포넌트는 독립적인 단위의 소프트웨어 모듈입니다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법입니다. 리액트는 웹에서 쓰는 요소를 컴포넌트로 만들 수 있게 해서 다른곳에서 다시 쓸 수 있도록 하는 높은 재사용성을 가집니다.
React는 Virtual DOM(가상돔)기반으로 가볍다.
가상돔은 이 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM 트리가 업데이트가 필요한 경우 이를 반영하는 방식을 말합니다. 가상돔 기반이기 때문에 하나의 동작마다 매번 DOM트리가 업데이트가 일어나거나 브라우저 렌더링 과정이 일어나지 않아서 더욱 가볍습니다.
React 컴포넌트는 state와 props을 가진다.
리액트는 UI가 사용자의 동작에 따른 UI나 Action이 필요하기 때문에 내부적으로 state와 props를 가집니다. 그래서 리액트를 잘 다루기 위해서는 state와 props에 대한 이해가 필요하고, 어떻게 구성할 것인지를 먼저 파악해야합니다.
React 사용이유
현재 많은 개발자들이 React에 열광하고 있고, 그 결과고 React 생태계는 점점 커지고 있습니다. React는 이전의 프론트엔드 도구들과는 많이 다릅니다. React는 작은 Library지만 개발자들에게 사고의 전환을 요구하는 여러가지 물음을 던집니다. 높지 않은 러닝커브로인해 툴이 아닌 자신의 개발에 집중할 수 있도록 하며 주의력 분산을 줄이게 됩니다.
React Native
React Native는 페이스북에서 개발한 “기본 앱 구성 요소로 컴파일되는 자바스크립트 오픈소스 모바일 프레임워크”입니다. 리액트의 접근방법을 모바일로 확장한 오픈소스 프로젝트입니다.
React Native 배경
‘앱’을 개발하기 위해서 안드로이드의 경우 Android(Java, Kotlin), 아이폰의 경우 IOS(Swift, Objective C)를 사용해야 합니다. 이렇게 Android와 IOS 개발을 따로하는 경우를 Native개발을 한다고 합니다. 두가지를 동시에 개발하기에는 인력과 시간의 소모가 커서 웹뷰를 네이티브에 씌우는 형태로, 이 둘을 동시에 개발할 수 있는 하이브리드 앱이 나오게 되었습니다. 그러나 하이브리드 앱의 느린 속도와 큰 규모의 프로젝트에는 적합하지 않은 특징때문에 React Native가 나오게 되었습니다.
Javascript로 코딩한 컴포넌트는 React Native 플랫폼을 거쳐서 Android Native, IOS코드로 각각 변환됩니다. 즉 Javascript 하나만으로 앱 Android와 IOS앱 제작이 가능합니다.
React Native 특징
장점
러닝 커브가 높지 않다. Javascript 만으로 앱을 만들 수 있다.
가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. JavaScript를 사용하기 때문에 플랫폼 별 언어를 몰라도 앱을 만들 수 있습니다. 현재 RN(React Native)가 점점 발전하면서 쓰이는 대부분의 기능들은 모두 서드파티 모듈 등에 제공하고 있습니다.
소스코드의 재사용, 개발 속도가 빠르다.
컴포넌트 기반으로 기능들을 분리해서 재사용할 수 있는 구조로 되어있기 때문에 생산성이 높으며, 개발하면서 빌드의 과정없이 바로 결과를 확인할 수 있게 하는 Live Reloading을 제공합니다.
오픈소스로, 리소스가 풍부하다.
리액트 네이티브는 오픈소스로 역사는 짧지만 높은 퍼포먼스와 생산성으로 인해 많은 개발자들이 사용하고, 그만큼 질의응답이 매우 활발합니다.
단점
기능의 한계가 있다.
앱을 개발하는데 있어서 필요한 기능이 RN에 없다면 직접 Native로 제작해야 합니다. 즉, Android와 IOS를 모두 할 줄 알아야 합니다. 또한 리액트 네이티브 브릿지를 사용하여 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네이티브 개발 방식보다는 당연하게 성능이 떨어집니다.
언어의 장벽이 있다.
아직까지 한국에서 RN의 커뮤니티는 많이 작습니다. 대부분의 문서와 질의응답이 거의 모두 영어로 되어있기 때문에 영어가 약하면 개발에 어려움이 있을 수 있습니다.
성능 이슈가 있다.
비즈니스 로직이 많이 복잡하거나 뷰 스택이 높게 쌓이면 속도가 느려진다는 성능 이슈가 있습니다. 이것 외에도 원인 모를 에러발생으로 개발의 어려움도 종종 있다고 합니다. 오픈소스이기 때문에 업데이트가 자주 발생하고, 업데이트 시에 수정되는 기능들 때문에 발생하는 버그들에 대해서 항상 생각해야합니다.
참고
리액트를 처음부터 배워보자
React Native를 소개합니다
리액트 네이티브란?장단점

React? React Native?

댓글