React Native(1)

리액트 네이티브는 리액트와 플랫폼 본연의 기능을 이용하여 안드로이와 ios 어플리케이션을 만들수 있는 오픈 소스 프레임워크라고 할 수 있습니다. 리액트 네이티브에서는 리액트 컴포넌트(재 사용가능하고, nestable한) 를 이용하여 UI의 동작이나 모양을 조절 할 뿐 아니라 자바스크립트를 사용하여 플랫폼 api에도 접근 할 수 있습니다.

그럼, 리액트 네이티브에서 컴포넌트가 어떤 식으로 동작 하는지 알아 보도록 합니다. 

뷰와 모바일 개발

안드로이드와 iOS개발에 있어서 뷰는 UI의 기본적인 블록입니다. 뷰는 텍스트, 이미지, 또는 사용자의 입력을 받을 수 있는 작은 스크린 구성요소 입니다. 화면에 나타나는 아주 작은 구성요소 조차도 예를 들면 한 줄의 텍스트나 버튼 조차도 뷰의 한 종류입니다. 어떤 뷰는 다른 뷰를 포함할 수도 있습니다. 모든 것이 뷰로 통한다고 할 수 있습니다.

네이티브 컴포넌트

안드로이드 개발에서는 Kotlin이나 자바를 사용하여 뷰를 생성하고, iOS개발에서는 Swift나 Objective-C를 사용하여 뷰를 생성합니다. 리액트 네이티브에서는 리액트 컴포넌트를 사용하는 자바스크립트로 뷰를 호출합니다. 그리고 런타임시에 안드로이드나 iOS에 따라서 뷰를 생성합니다. 리액트 컴포넌트가 각 플랫폼 뷰의 좀 더 하위에 존재 하므로, 리액트 앱은 다른 앱처럼 보이고 동작할 수 있습니다. 이런 플랫폼의 하위 컴포넌트를 네이티브 컴포넌트라고 합니다. 

리액트 네이티브는 필수적이고 바로 사용가능한 네이티브 컴포넌트를 가지고 있고, 앱을 만드는데 바로 사용할 수 있습니다. 이것들을 리액트 네이티브의 코어 컴포넌트라고 부릅니다. 

또한 리액트 네이티브는 앱의 특성에 맞는 네이티브 컴포넌트를 직접 만들수도 있습니다. 이런 특성화된 네이티브 컴포넌트를 공유할 수 있는 커뮤니티를 위한 에코시스템이 존재합니다. 네이티브 디렉터리를 통해서 커뮤니티를 확인할 수 있습니다. 

코어 컴포넌트

리액트 네이티브는 폼 컨트롤 부터 인디케이터 까지 대부분의 코어 컴포넌트를 가지고 있습니다. 다큐멘트를 통해서 이런 컴포넌트를 확인해 볼 수 있습니다. 자주 사용하는 몇 가지 코어 컴포넌트를 여기서 소개 합니다. 

리액트 네이티브 UI 컴포넌트	안드로이드 뷰	iOS 뷰	웹	설명
<View>	<ViewGroup>	<UIView>	<div>	컨트롤이나 터치 또는 스타일, 레이아웃을 조절하는 박스를 제공하는 컨테이너
<Text>	<TextView>	<UITextView>	<p>	텍스트를 위한 스타일이나 내용을 조절할 수 있는 컴포넌트
<Image>	<ImageView>	<UIImageView>	<img>	여러가지 이미지를 보여준다
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러가지 컴포넌트나 뷰를 가지고 스크롤을 제공하는 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	유저의 입력을 받을 수 있는 컴포넌트

리액트 네이티브는 리액트 컴포넌트와 같은 API를 사용하기 때문에 먼저 리액트 컴포넌트의 API를 이해할 필요가 있습니다. 다음 번에는 리액트 컴포넌트에 대한 개략을 알아 보도록 합니다.