React Native는 React의 컴포넌트 모델과 JSX를 사용합니다 — JSX를 반환하는 재사용 가능한 component로 UI를 만듭니다. 웹용 React를 안다면 이 지식이 그대로 전이되며, 주요 차이는 HTML 요소 대신 네이티브 컴포넌트를 사용한다는 점입니다.
component와 JSX
jsx
() {
(
);
}
() {
(
);
}
React Native는 React의 컴포넌트 모델과 JSX를 사용합니다 — JSX를 반환하는 재사용 가능한 component로 UI를 만듭니다. 웹용 React를 안다면 이 지식이 그대로 전이되며, 주요 차이는 HTML 요소 대신 네이티브 컴포넌트를 사용한다는 점입니다.
() {
(
);
}
() {
(
);
}
Component는 재사용 가능한 UI 조각(JSX를 반환하는 함수)으로, props(입력)를 받아 트리로 조합됩니다 — 네이티브 컴포넌트를 사용한다는 점만 빼면 웹용 React와 정확히 같습니다.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // STATE (useState hook)
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>Count: {count}</Text> {/* state가 변경되면 다시 렌더링됨 */}
</TouchableOpacity>
);
}
Props는 component에 데이터를 전달하고, state(useState를 통해)는 다시 렌더링을 유발하는 변하는 데이터를 담습니다 — 웹에서와 동일한 React 모델입니다.
✓ component, JSX, props, state, HOOK (useState, useEffect 등), 조합, key —
모두 웹용 React와 동일
✓ 주요 차이: HTML 대신 네이티브 컴포넌트 (View/Text); styling이 다름
→ React 개발자는 대부분의 지식을 React Native에 직접 적용할 수 있음
React Native에서 component와 JSX가 어떻게 동작하는지 이해하는 것은 기본인데, React Native는 React의 컴포넌트 모델 위에 구축되어 있어 이를 파악하는 것이 필수이며, React 지식이 그대로 전이된다는 것이 큰 장점이기 때문입니다.
Component(JSX를 반환하고, props를 입력으로 받으며, 트리로 조합되는 재사용 가능한 UI 조각)와 JSX(표현식이 포함된 UI를 기술하는 문법)는 React Native 개발의 기초이며, 웹용 React와 같습니다.
props(component에 데이터 전달)와 state(useState hook을 통해 다시 렌더링을 유발하는 변하는 데이터)를 이해하는 것은 필수입니다. 이 React 개념들은 React Native 컴포넌트가 데이터를 받고 변화를 관리하는 방식이기 때문입니다 — 웹 React와 동일합니다.
핵심 통찰은 React 지식이 전이된다는 점입니다. component, JSX, props, state, hook(useState, useEffect 등), 조합, key가 모두 웹용 React와 같은 방식으로 동작하며, 주요 차이는 HTML 대신 네이티브 컴포넌트(View, Text) 사용과 다른 스타일링뿐입니다.
이 전이성은 React Native가 매력적인 주된 이유입니다 — 방대한 풀의 React/웹 개발자가 기존 지식 대부분을 네이티브 모바일 앱 개발에 직접 적용할 수 있으며, 네이티브 컴포넌트와 플랫폼 특성에 집중된 비교적 작은 학습 곡선만 있습니다.
React Native는 근본적으로 네이티브 UI에 적용된 React(component, JSX, props, state, hook)이고, 이 모델을 이해하는 것이 React Native 앱 개발에 필수이면서 React 지식이 그대로 전이된다는 핵심 장점이 있으므로, React Native에서 component와 JSX를 이해하는 것은 필수 기초 지식입니다. 이는 React Native의 핵심 프로그래밍 모델이며 앱 개발에 필요하고, 특히 웹의 React/웹 기술이 React Native 모바일 개발에 얼마나 직접 적용되는지를 잘 보여줍니다.