리액트? 리액트 네이티브??

안녕하세요 :) Zedd입니다.

웹을 하시는 분들이라면 "리액트"라는 단어는 무조건 들어보셨을 것 같은데..

저는 잘 몰라서 정리를 하려고 합니다.

정리하는 김에 리액트 네이티브까지 ㅇㅇ

● 리액트

정의는 "사용자 인터페이스(UI)를 만들기 위한 자바스크립트(JavaScript)라이브러리이다" 입니다.

페이스북에서 만들었죠. 무려 오픈소스 ㅇㅇ 링크는 여기

간단히 말해서 이벤트 요청 시, 서버에서 코드를 받아 페이지를 다시 렌더링 해야하는 문제를 해결하기 위해 만들어졌다고 해요. 프레임워크가 아니라, 라이브러리이기 때문에, 리액트를 내가 사용한다고 모든 코드를 바꿔야 하는게 아니라!! 필요할 때 그냥 가져다가 쓰면 됩니다.

리액트가 "사용자 인터페이스"를 만들기 위한 라이브러리라고 그랬죠? (그래서 앵귤러보다 쓰기 간편?하다고 합니다)

여기서 볼 수 있듯이, 사용자 인터페이스!! == UI == View!!!!

즉, 리액트의 특징은 MVC에서 VIew에만 집중하고 있다고 볼 수 있습니다. 이 특징이 장점이자, 단점이라고 하는데 오직!! View만을 위한 라이브러리이기 때문에 View이외의 기능은 Third party library를 이용하거나 직접구현해야 한다고 합니다.

또한 IE8이하는 지원하지 않는다고 해요.

● 리액트 네이티브

일단 위에서 배운 "리액트"와 네이티브가 합쳐진 말인 것 같은데...

일단 정의만 말하자면, 리액트 네이티브는 네이티브 모바일 앱을 만들 수 있게 도와주는 라이브러리입니다. 역시나 페이스북에서 만들었고, 오픈소스입니다.

링크는 여기 

엥;;;모바일앱이요? 모바일앱에는 일단 안드로이드랑 iOS가 있는데..무슨 모바일앱?

네! 리액트 네이티브로는 "둘 다" 만들 수 있습니다. 

Q : ? 나는 자바/Swift(또는 Objc) 모르는데?

A : JavaScript로 만들 수 있음 ㅎ

Q : 엥 그럼 리액트 네이티브로 만들면 웹앱 또는 하이브리드앱 아니냐???

A : 아닙니다. Objective-C, Java 또는 Swift를 사용하여 만든 앱과 구별 할 수없는 실제 모바일 앱을 만들 수 있습니다.  React Native는 일반 iOS 및 Android 앱과 동일한 기본 UI 빌딩 블록을 사용합니다. JavaScript와 React를 사용하여 이러한 빌딩 블록을 함께 모으는 것입니다. (React Native는 자바스크립트 코드와 네이티브 코드를 별도의 스레드로 분리하여 둘 사이의 통신을 비동기식으로 만들어 느려지는 현상이 없습니다)

신기하지않나요?

내가 리액트 네이티브를 쓰기만하면!!!!! 안드로이드앱과 iOS앱 둘다를 만들 수 있는 것이죠.

또 엄청난...장점이 있음..

무려.....컴파일 시간을 줄일 수 있다는것!!!!!!!!!!!!!!!!!!!!!!!

우리가 소스를 뭐 추가하거나 그러면 일단 시뮬레이터에서 보든가 폰에서 보려면 일단 컴파일을 해야하잖아요??

리액트 네이티브로 만든 앱은 안그래도 됩니다. 다시 컴파일 하는 대신, 즉시 앱을 다시 로드 할 수 있다고 합니다.  새로고침을 사용하면 App상태를 유지하면서, 새 코드를 실행 할 수도 있다고 해요.

읽으시면서 이 리액트 네이티브가 정말 마법같겠지만 만능은 아닙니다.

일단 안드로이드, iOS각각에서 특정 기능(ex. 안드로이드에서는 ProgressBar 를 써야 한다면 iOS에서는 ActivityIndicator를 써야 합니다.)을 사용하려면 각 플랫폼 별 API를 사용해야 합니다. 그리고 애니메이션이 많은 앱같은 경우에는 리액트 네이티브로는 조금 퍼포먼스가 떨어질 수 있다고 합니다. 

그리고 비즈니스로직이 복잡해도 느려질 수 있다고 하고, 네이티브뷰 <-> JavaScript 로직 간 소통이 많아도 느려진다고 합니다 ㅎ_ㅎ...

대신 생산성이 엄청나게 좋아지고, 위에서 말한 컴파일 시간을 줄일 수 있으며, 문법이 간편하다고 해요 :)

그리고 Swift로 만든 네이티브와 리액트 네이티브의 성능을 비교한 글이 있는데, 참고하시면 좋을 것 같아요. 

읽어보시면 리액트 네이티브가 네이티브에 꿀리지?않는 모습을 볼 수 있습니다.

참고 : https://blog.wonhada.com/?p=2974

(하지만, 리액트 네이티브가 초기에는 퍼포먼스가 좋지만, 스택이 쌓일 수록 느려진다고 합니다.)

이까지 읽고 "아 나 JavaScript고수ㅋㅎㅋㅎㅋㅎ리액트 네이티브가 리액트가 베이스니(JavaScript) 나도 이제 앱개발을 할 수 있는것인가 ㅎㅁㄹㅎㅋㅎㅋㅎ"

이렇게 생각하시면 안됩니다. JavaScript만으로는 개발 할 수 없고, 반드시 네이티브단의 개발과 함께 해야합니다...만 npm이나 Expo를 잘 활용하면 네이티브 지식을 몰라도 개발 할 수 있다고 합니다. 

참고 : 

https://medium.com/we-make-radish-fiction/리액트-네이티브-react-native-일년-a0556f2755aa

https://blog.gaerae.com/2016/04/hello-react.html

https://academy.realm.io/kr/posts/react-native-android-pros-cons/

https://blog.sendbird.com/ko/tutorial-react-native-메시지-앱-제작하기