React Native의 핵심 컴포넌트는 무엇인가요?

Question

Accepted Answer

React Native는 네이티브 UI 요소로 매핑되는 **View**, **Text**, **Image**, **ScrollView**, **TextInput** 같은 **핵심 컴포넌트** 모음을 제공합니다. 이들은 React Native UI의 기본 구성 요소이며, 웹의 HTML 요소 대신 사용됩니다. ## 핵심 컴포넌트 (웹 HTML과 비교) ```text React Native는 HTML이 아니라 (네이티브 view로 매핑되는) 자체 컴포넌트를 사용함: VIEW → 컨테이너 (

와 유사) — 기본 레이아웃 구성 요소 TEXT → 텍스트 표시 (웹과 달리 모든 텍스트는 안에 있어야 함) IMAGE → 이미지 표시 (로컬 또는 원격) TEXTINPUT → 텍스트 입력 필드 (과 유사) SCROLLVIEW → 스크롤 가능한 컨테이너 FLATLIST → 효율적인 스크롤 LIST (긴 목록용 — 지연 렌더링) TOUCHABLEOPACITY / PRESSABLE → 탭 처리 (터치 가능 영역) BUTTON → 기본 버튼 ``` ## 예시 ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* 컨테이너 (div와 유사) */} Ann {/* 텍스트는 반드시 안에 */} {}}> Submit ); } ``` ## 웹과의 주요 차이점 ```text ✓

대신 ,

/ 대신 ; 모든 텍스트는 안에 있어야 함 ✓ CSS 클래스/파일 없음 — style prop으로 STYLING (JS 객체, StyleSheet) — styling 참고 ✓ 상호작용에는 Touchable/Pressable 사용 (div에 onClick이 아님) ✓ 긴 목록에는 FlatList 사용 (효율적) — 전부 map으로 돌리지 않음 ``` ## 왜 중요한가 핵심 컴포넌트를 이해하는 것은 React Native 개발의 기본인데, **이들이 모든 React Native UI의 구성 요소**이기 때문입니다. 인터페이스를 만들기 위해 이들을 조합하므로 반드시 알아야 할 기초 지식입니다. React Native는 (웹 HTML 요소 대신) 네이티브 view로 매핑되는 **자체 컴포넌트**를 제공하며, 핵심적인 것들 — **View**(컨테이너, div와 유사), **Text**(모든 텍스트용이며, 웹과 달리 모든 텍스트는 Text 컴포넌트 안에 있어야 한다는 중요한 규칙 포함), **Image**, **TextInput**, **ScrollView**, **FlatList**(효율적인 긴 목록용), Touchable/**Pressable**(탭 처리용) — 을 이해해야 어떤 React Native UI든 만들 수 있습니다. **웹과의 주요 차이점**을 이해하는 것은 특히 React Native로 전환하는 웹/React 개발자에게 중요합니다. div 대신 View, p/span 대신 Text(모든 텍스트는 Text 안 규칙), CSS 클래스/파일 대신 style prop을 통한 스타일링, onClick 대신 Touchable/Pressable을 통한 상호작용, 모든 것을 map하는 대신 긴 목록에는 **FlatList**(효율적/지연 렌더링) 사용 — 이러한 차이들은 흔한 걸림돌이며, 핵심 컴포넌트를 이해하면 명확해집니다. 컴포넌트는 (React처럼) 조합되어 UI를 만들며, View가 기본 컨테이너 역할을 합니다. 핵심 컴포넌트는 모든 React Native UI의 구성 요소이고(인터페이스를 구성하기 위해 끊임없이 사용), 이들과 웹 HTML과의 차이를 이해하는 것은 React Native 앱(특히 웹 개발자에게) 개발의 기본이므로, 핵심 컴포넌트를 이해하는 것은 필수 기초 지식입니다. 이는 React Native UI의 기본 어휘이며, 어떤 인터페이스든 만들고 웹 React 지식을 네이티브 컴포넌트 모델에 적응시키는 데 필요한 React Native 개발의 핵심 역량입니다.