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

React Native는 React와 앱 플랫폼의 네이티브 기능을 활용해 Android 및 iOS 애플리케이션을 구축하기 위한 오픈소스 프레임워크이다. React Native에서는 JavaScript를 사용해 플랫폼의 API에 접근하고, 재사용 가능하며 중첩할 수 있는 코드 묶음인 React 컴포넌트를 통해 UI의 외관과 동작을 정의한다. React에 대한 자세한 내용은 다음 섹션에서 다룬다. 하지만 먼저 React Native에서 컴포넌트가 어떻게 동작하는지 살펴보자.

뷰와 모바일 개발

안드로이드와 iOS 개발에서 뷰는 UI의 기본 구성 단위이다. 화면에 표시되는 작은 직사각형 엘리먼트로, 텍스트나 이미지를 표시하거나 사용자 입력에 반응할 수 있다. 앱의 가장 작은 시각적 요소인 한 줄의 텍스트나 버튼도 모두 뷰의 일종이다. 일부 뷰는 다른 뷰를 포함할 수 있다. 뷰는 계층적으로 구성된다!

안드로이드와 iOS 앱에서 사용되는 다양한 뷰의 예시.

네이티브 컴포넌트

안드로이드 개발에서는 Kotlin이나 Java를 사용해 뷰를 작성한다. iOS 개발에서는 Swift나 Objective-C를 사용한다. React Native를 사용하면 이러한 뷰를 JavaScript로 작성한 React 컴포넌트를 통해 호출할 수 있다. 런타임에 React Native는 해당 컴포넌트에 맞는 안드로이드와 iOS 뷰를 생성한다. React Native 컴포넌트는 안드로이드와 iOS의 네이티브 뷰를 기반으로 하기 때문에, React Native 앱은 다른 네이티브 앱과 동일한 외관과 성능을 제공한다. 이러한 플랫폼 기반 컴포넌트를 네이티브 컴포넌트라고 부른다.

React Native는 앱 개발을 바로 시작할 수 있도록 필수적인 네이티브 컴포넌트를 제공한다. 이를 React Native의 코어 컴포넌트라고 한다.

caution

이 문서는 레거시 API를 참조하고 있으며, 새로운 아키텍처를 반영하도록 업데이트해야 합니다.

React Native는 또한 앱의 특수한 요구사항에 맞게 안드로이드와 iOS용 네이티브 컴포넌트를 직접 만들 수 있는 기능을 제공한다. 또한, 커뮤니티에서 기여한 컴포넌트들로 구성된 활발한 생태계가 있다. Native Directory에서 커뮤니티가 만든 다양한 컴포넌트를 확인할 수 있다.

핵심 컴포넌트

React Native는 컨트롤부터 활동 표시기까지 다양한 기능을 제공하는 여러 핵심 컴포넌트를 포함한다. 이 모든 컴포넌트는 API 섹션에서 문서화되어 있다. 주로 사용하게 될 핵심 컴포넌트는 다음과 같다:

React Native UI 컴포넌트	Android 뷰	iOS 뷰	웹 유사물	설명
<View>	<ViewGroup>	<UIView>	스크롤되지 않는 <div>	플렉스 박스 레이아웃, 스타일, 터치 처리, 접근성 컨트롤을 지원하는 컨테이너
<Text>	<TextView>	<UITextView>	<p>	텍스트 문자열을 표시하고 스타일을 적용하며, 터치 이벤트도 처리함
<Image>	<ImageView>	<UIImageView>	<img>	다양한 타입의 이미지를 표시함
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러 컴포넌트와 뷰를 포함할 수 있는 일반적인 스크롤 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있게 함

다음 섹션에서는 이 핵심 컴포넌트들을 조합해 React가 어떻게 동작하는지 배울 것이다. 여기서 직접 실습해 보자!

---

React Native는 React 컴포넌트와 동일한 API 구조를 사용하므로, 시작하려면 React 컴포넌트 API를 이해해야 한다. 다음 섹션에서 이 주제에 대한 간단한 소개나 복습을 할 수 있다. 이미 React에 익숙하다면 다음으로 건너뛰어도 된다.