최근에 React-Native로 프로젝트를 하면서 공식문서를 제대로 읽어보지 못한 것이 아쉬워서 이번에 공식문서를 천천히 살펴보려합니다.
React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 안드로이드 및 iOS 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. React Native를 사용하면 JavaScript를 사용하여 플랫폼의 API에 액세스할 뿐만 아니라 재사용 가능하고 중첩 가능한 코드 묶음인 React 컴포넌트를 사용하여 UI의 모양과 동작을 설명할 수 있습니다.
Android 및 iOS 개발에서 뷰는 UI의 기본 구성 요소로, 텍스트, 이미지를 표시하거나 사용자 입력에 응답하는 데 사용할 수 있는 화면의 작은 직사각형 요소입니다. 일부 종류의 보기는 다른 보기를 포함할 수 있습니다.
런타임에 React Native는 해당 컴포넌트에 해당하는 Android 및 iOS 뷰를 생성합니다. 리액트 네이티브 컴포넌트는 안드로이드 및 iOS와 동일한 뷰로 지원되기 때문에 리액트 네이티브 앱은 다른 앱과 같은 모양, 느낌 및 성능을 갖습니다. 우리는 이러한 플랫폼 지원 컴포넌트를 Native Component라고 부릅니다.
리액트 네이티브는 바로 사용할 수 있는 필수 네이티브 컴포넌트 세트와 함께 제공되어 바로 앱 빌드를 시작할 수 있습니다. 이것이 바로 React Native의 핵심 컴포넌트입니다.
React Native를 사용하면 앱의 고유한 요구사항에 맞게 안드로이드 및 iOS용 네이티브 컴포넌트를 직접 빌드할 수 있습니다.
React Native에는 많은 핵심 컴포넌트가 있습니다. API 섹션에서 모두 문서화되어 있습니다. 주로 다음 핵심 컴포넌트로 작업하게 될 것입니다:
| REACT NATIVE UI COMPONENT | ANDROID VIEW | IOS VIEW | WEB ANALOG | DESCRIPTION |
|---|---|---|---|---|
<View> |
<ViewGroup> |
<UIView> |
스크롤 되지 않는 <div> |
플렉스박스, 스타일, 일부 터치 처리 및 접근성 컨트롤이 있는 레이아웃을 지원하는 컨테이너 |
<Text> |
<TextView> |
<UITextView> |
<p> |
텍스트 문자열을 표시, 스타일 지정 및 중첩하고 터치 이벤트까지 처리합니다. |
<Image> |
<ImageView> |
<UIImageView> |
<img> |
다양한 유형의 이미지 표시 |
<ScrollView> |
<ScrollView> |
<UIScrollView> |
<div> |
여러 컴포넌트와 뷰를 포함할 수 있는 일반 스크롤 컨테이너 |
<TextInput> |
<EditText> |
<UITextField> |
<input type="text"> |
사용자가 텍스트를 입력할 수 있습니다. |