1.1코어 컴포넌트와 네이티브 컴포넌트

모바일 앱 UI의 기본 요소, View

모바일 앱을 개발할때, View는 UI를 이루는 기본적인 구성 요소로, 텍스트, 이미지 등을 담을 수 있는 작은 직사각형 상자를 일컫는다. View는 안드로이드든 iOS든 공용으로 쓰이는 용어다. 보다 정확히는, iOS에선 UIView라고 하고 안드로이드에서는 View라고 하지만 둘은 서로 같은 요소를 가리킨다.

Native Components

안드로이드 개발에서 View는 코틀린이나 자바로, iOS 개발에선 Swift나 Objective-C로 작성될 것이다. RN에서는 React의 컴포넌트 형식으로 View를 구현하며, 이렇게 구현한 자바스크립트 코드를 런타임에서 안드로이드/iOS 각각에 대응하는 View를 생성한다.

즉, 컴파일 시점에 RN의 View는 Metro 번들러(RN의 기본 번들러)에 의해 JS 코드가 된다. index.bundle 파일에는 import {View} from "react-native"같은 코드가 require("react-native/Libraries/Components/View/View")식으로 변환되는데, 이러한 컴파일 결과물은 "자바스크립트 코드 → 네이티브 UI를 만들어달라"고 요청하는 함수 호출 형태가 된다.

앱이 실행되면, RN의 JS 런타임(Hermes)이 이 코드를 실행하고 RN의 UI Manager가 아래의 과정을 통해 네이티브 객체를 생성하는 것이다:

• 안드로이드: com.facebook.react.views.view.ReactViewGroup 같은 네이티브 View 클래스 인스턴스 생성
• iOS: UIView를 상속한 RCTView 클래스 인스턴스 생성

이렇게 생성된 네이티브 UI 객체는 네이티브 레이아웃 시스템(Android: ViewGroup, iOS: UIView) 안에서 배치되고 그려져 사용자에게 노출된다.

이렇게 만들어진 UI는 네이티브 UI와 동일한 경험을 가능하게 해주며, 이렇게 네이티브 UI를 만드는 RN 컴포넌트를 Native Component라고 한다.

RN은 이런 식으로 네이티브 UI를 React 컴포넌트 형식으로 만들 수 있게 내장된 컴포넌트들을 제공하는데, 이 컴포넌트들을 RN의 Core Component라고 한다.

이외에도 RN의 생태계에 기여하는 커뮤니티들에서 만든 컴포넌트들이 있는데, 이들은 Native Directory에서 확인 가능하다.

Core Components

RN의 모든 Core Component와 API는 여기서 확인할 수 있다. 이번 포스팅에선 그 중에서도 보다 자주 쓰일 컴포넌트 몇개를 살펴보자. 앞서 언급했듯, 이 컴포넌트들은 런타임에서 네이티브 UI로 렌더된다.

• <View>: 웹의 <div>에 해당되나, 정확히는 스크롤이 되지 않는 <div>다.
• <Text>: <p>에 해당.
• <Image>: <img>에 해당.
• <ScrollView>: <div>에 해당되나, 정확히는 스크롤 가능한 영역을 제공하는 컨테이너이다.
• <TextInput>: <input type="text">에 해당된다.