갓난애기도 배울 수 있는 React Native 가이드 ② – JSX, 컴포넌트, 스타일링 한 번에 끝내기

갓난애기도 배울 수 있는 React Native 가이드 ② – JSX, 컴포넌트, 스타일링 한 번에 끝내기

설치도 끝났고, 앱도 실행했으니 이제 진짜 개발을 시작해볼 차례입니다!
이번 글에서는 React Native 앱의 뼈대인 JSX 문법, 컴포넌트 구조, 그리고 스타일링 방법까지
기초를 한 번에 정리해보겠습니다. 실습 중심으로 쉽게 따라오세요 😎

---

✅ 1. JSX란 무엇인가?

JSX(JavaScript + XML) 는 HTML처럼 보이지만, 사실은 JavaScript입니다.

const App = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

JSX는 return() 안에서 XML처럼 마크업을 작성하게 해주는 문법입니다.
하지만, 모든 JSX는 반드시 하나의 루트 컴포넌트로 감싸야 합니다!

---

✅ 2. 기본 컴포넌트 구조 이해하기

React Native는 HTML 대신 아래와 같은 기본 빌트인 컴포넌트를 사용합니다.

React Native HTML 역할 설명

View	<div>	박스형 레이아웃, 컨테이너
Text	<p>, <span>	텍스트를 표시할 때 사용
Image	<img>	이미지 렌더링
ScrollView	<div style="overflow:scroll">	스크롤 가능한 컨테이너

---

✅ 3. App.js 수정 실습 ✍️

반응형

App.js를 아래처럼 바꿔보세요.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>안녕하세요, React Native!</Text>
      <Text style={styles.subtitle}>이제부터 앱을 만들어 볼게요 🚀</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#2b2b2b',
  },
  subtitle: {
    fontSize: 16,
    color: '#888',
    marginTop: 8,
  },
});

export default App;

▶️ 실행 결과:

• 가운데 정렬된 텍스트 2줄
• 큰 글씨 제목, 작은 글씨 설명

---

✅ 4. 스타일링은 어떻게 하지?

React Native는 CSS가 없고, StyleSheet.create()로 스타일을 객체 형태로 정의합니다.

✅ 예: CSS와 비교

CSS 문법 React Native 문법

background-color	backgroundColor
font-weight	fontWeight
text-align	textAlign
margin-top	marginTop

const styles = StyleSheet.create({
  text: {
    color: 'blue',
    fontSize: 18,
    marginTop: 10,
  },
});

---

✅ 5. 실습: 컴포넌트 나누기

파일을 나누어 컴포넌트를 구성해봅시다.

📄 Greeting.js

import React from 'react';
import { Text } from 'react-native';

const Greeting = ({ name }) => {
  return <Text style={{ fontSize: 20 }}>안녕하세요, {name}님!</Text>;
};

export default Greeting;

📄 App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    <View style={styles.container}>
      <Greeting name="홍길동" />
      <Greeting name="김민지" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

👉 props를 통해 컴포넌트 간 데이터를 주고받는 구조 이해하기!

---

✅ 6. 이번 글에서 배운 것

• JSX 문법과 구조 이해
• React Native 컴포넌트 종류 (View, Text, Image, …)
• StyleSheet를 이용한 스타일링 방법
• props를 이용한 컴포넌트 분리 실습

---

📘 다음 글 예고

갓난애기도 배울 수 있는 React Native 가이드 ③ – 버튼, TextInput, 이벤트 핸들링 완전정복

사용자 입력을 받고, 버튼 클릭에 반응하는 앱을 만드는 법을 배워봅니다!
드디어 인터랙션이 있는 “진짜 앱”처럼 동작합니다 💪

---

 

React Native JSX 문법,React Native 컴포넌트 종류,React Native props 예제,React Native 스타일 적용법,React Native View 사용법,React Native Text 스타일링,React Native 초보 강의,React Native 컴포넌트 분리,React Native 앱 구성,React Native 스타일시트

---