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

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에 익숙하다면 이 부분을 건너뛰어도 된다.