리액트 네이티브(ReactNative)란?

리액트 네이티브란(React Native) ?

• 오픈 소스 모바일 응용 프로그램
• 네이티브 앱 개발을 위한 자바스크립트 프레임워크
• ios와 안드로이드에서 동일하게 동작시킬수 있는 API

 

 

앱 Application

앱에는 여러가지 종류가 있는데 다음과 같다.

네이티브 앱 / 웹 앱 / 하이브리드 앱 

 

네이티브 앱 

• 가장 일반적으로 이야기하는 앱
• 모바일기기에 최적화된 언어로 개발됨
• 속도가 빠르며, 내부의 파일/주소록/사진 등 고유 정보 사용 변경 가능
• 안드로이드, ios로 나뉘어짐 

 

웹앱 

• 모바일 웹과 네이티브 앱을 결합한 유형
• PC, 스마트폰 기종에 관계없이 사용가능
• 웹에서 사용하는 언어로 개발 → 접속장애가 발생할 수 있음 

 

하이브리드 앱

• 네이티브 앱과 웹앱의 장점을 모으고 단점을 보완한 형태의 앱 
• 내부는 웹앱으로 개발 후, 외부를 네이티브 앱으로 둘러쌈 

 

이 중에 React Native는 네이티브 앱을 개발하는 프레임 워크이다.

 

네이티브 앱과 리액트 네이티브

네이티브 앱을 더 자세히 살펴보면, 안드로이드 / IOS 로 나뉘는데

안드로이드 네이티브앱 : java kotlin -> 각각을 안드로이드 플랫폼에 컴파일 해주는 컴파일러 필요

ios 네이티브 앱 : swift -> 각각을 IOS 플랫폼에 컴파일 해주는 컴파일러 필요

각각 서로 다른 언어로 개발되며, 서로 각각의 플랫폼(ios , android platform)에 컴파일해주는 컴파일러가 필요하다

 

이에 반해 리액트 네이티브는 자바스크립트를 기본언어로 사용하며, 같은 코드로 안드로이드, ios에 모두 사용가능하다.

어떻게 가능한지에 대해서... 

 

리액트 네이티브의 구동 원리

자바스크립트 개발코드를 각 OS플랫폼(ios / android) 에 타게팅하는데,

자바스크립트코드가 앱이 되기까지 

1. JS 코드 작성 
2. React Native API사용
3. JS Bundle 형태로 각 os 플랫폼에 제공
4. 플랫폼 내부에서 JS Thread와 Native Threads를 소통시켜주는 Bridge가 존재하여 소통
5. 기기에서 앱으로 구동 

의 과정을 거친다 

 

" JS코드 작성 -> React Native API사용 -> JS Bundle로 만드는 법 " 의 과정을 해주어야 하는데,

JS Bundle을 만드는 법에는 2가지가 존재한다. 

 

JS Bundle을 만드는 법 

Expo CLI vs React Native CLI 

	Expo CLI	React Native CLI (mac OS가 더 좋음)
장점	개발 환경 구축과 개발이 용이함	개발 자유도가 높음 (모듈 직접 제작 / Native기능에 접근가능 / 원하는 언어로 추가작성 가능 등)
단점	OS와 직접상호작용이 불가하여, 개발 자유도가 낮음	초기 개발환경 구축 및 개발에 시간이 더 소요됨

다음과 같은 장단점이 존재하므로, 진지하게 네이티브 앱 개발을 원하는 사람은 React Native CLI 를 선택하는 것이 좋다 

그런데 리액트 네이티브를 잘 사용하기 위해서는 macOS의 개발환경을 갖추는게 좋다고 한다. 

윈도우로도 불가능 한 것은 아니지만 제공하는 것에 차이가 있다나.. 중요하지 않아서 넘어감

 

이제 React Native를 설치하는 방법에 대해서는 

2021.02.03 - [WEB_APP/React-Native] - [Silicon Mac M1] React Native 설치하기

[Silicon Mac M1] React Native 설치하기

여기를 참고 

 

 

 

React Native 의 사전지식 

• HTML 
• CSS
• JS
• ES6
• React

의 사전 지식이 필요하다.

하지만, 이 5가지의 모든 것을 전부 완벽히 알고 있어야하는 것은 아니다. 간단하게 설명,

 

HTML : 프로그래밍 언어가 아닌 마크업 언어, 웹페이지의 구조적 문서를 만들 수 있는 방법을 제공 

CSS : 마크업 언어가 실제로 표시되는 방법을 기술하는 언어, 레이아웃 스타일 정의시 자유도가 높음 

JS : 객체 기반의 스크립트 프로그래밍 언어, 동적인 페이지를 만들기 위한 언어이다.

ES6 : 자바스크립트를 이루는 코어 스크립트 언어로, 간단하게 말하면 자바 스크립트 언어의 표준 규격을 의미한다.

 

 

 

강의는 인프런에서 "iOS/Android 앱 개발을 위한 실전 React Native - Basic" 강의를 참고하여 공부할 예정

리액트 네이티브는 자료가 별로 없는 것 같다.. ㅠ