Day 2 - React Native 기본 구성 요소

📌React Native 기본 구성 요소 

🚀 React Native의 기본 구성 요소와 컴포넌트 개념 정리

📖 학습 목표

• React Native 컴포넌트 개념과 사용법 이해
• JSX 문법과 Props 개념 학습
• Expo의 역할과 프로젝트 구조 분석

---

1️⃣ React Native 컴포넌트란?

React Native에서는 모든 화면 요소(UI)가 컴포넌트로 구성됩니다.
즉, 버튼, 텍스트, 입력 필드, 이미지 등 모든 요소가 컴포넌트입니다.

✔️ React Native 컴포넌트의 특징

✅ 재사용 가능 → 한 번 만든 컴포넌트를 여러 번 사용할 수 있음
✅ 독립적인 상태와 속성(props) 보유 → 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 가능
✅ 웹과 다름 → HTML과 유사하지만, 실제 네이티브 UI로 렌더링됨

📌 React Native vs HTML 요소 비교

구분 React Native HTML(Web)

레이아웃 요소	<View>	<div>
텍스트 표시	<Text>	<p>, <span>
이미지 삽입	<Image>	<img>
스크롤 영역	<ScrollView>	<div style="overflow:auto">

---

2️⃣ React Native 컴포넌트 사용 예제

📌 기본적인 컴포넌트 구조

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

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>안녕하세요, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: 'lightblue',
  },
  text: {
    fontSize: 20,
    color: 'white',
  },
});

export default MyComponent;

✔️ View: 레이아웃 컨테이너 (div 역할)
✔️ Text: 텍스트 표시 (p, span 역할)
✔️ StyleSheet.create(): CSS 스타일 적용 (CamelCase 사용)

---

3️⃣ 주요 내장 컴포넌트 정리

React Native는 UI 개발을 쉽게 하기 위해 다양한 내장 컴포넌트를 제공합니다.

📌 주요 내장 컴포넌트

컴포넌트 역할 사용 예시

View	레이아웃 컨테이너	<View style={{ flex: 1 }}>
Text	텍스트 표시	<Text>Hello</Text>
Image	이미지 출력	<Image source={{ uri: 'image_url' }} />
ScrollView	스크롤 가능한 화면	<ScrollView><Text>내용</Text></ScrollView>
FlatList	최적화된 리스트 출력	<FlatList data={data} renderItem={renderItem} />
TextInput	사용자 입력 필드	<TextInput placeholder="입력하세요" />
Button	기본 버튼	<Button title="클릭" onPress={handlePress} />

📌 FlatList 예제 (스크롤 가능한 리스트)

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

const data = [
  { id: '1', name: '사과' },
  { id: '2', name: '바나나' },
  { id: '3', name: '오렌지' },
];

const Item = ({ name }) => (
  <View>
    <Text>{name}</Text>
  </View>
);

const MyList = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Item name={item.name} />}
    />
  );
};

export default MyList;

✔️ FlatList → 성능 최적화를 위해 필요한 데이터만 렌더링
✔️ keyExtractor → 리스트의 고유한 키 설정 필수

---

4️⃣ Props(속성)과 State(상태)

React Native에서 컴포넌트 간 데이터 전달을 위해 Props와 State를 사용합니다.

✔️ Props (속성)

• 부모 → 자식 컴포넌트로 데이터 전달
• 읽기 전용 (변경 불가)

📌 Props 예제

const Profile = ({ name, age }) => {
  return (
    <View>
      <Text>이름: {name}</Text>
      <Text>나이: {age}</Text>
    </View>
  );
};

const App = () => {
  return <Profile name="홍길동" age={25} />;
};

✔️ State (상태)

• 컴포넌트 내부에서 동적으로 변경되는 데이터
• useState() 훅을 사용하여 상태 관리

📌 State 예제 (버튼 클릭 시 카운트 증가)

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>카운트: {count}</Text>
      <Button title="증가" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

---

5️⃣ Expo의 개념과 역할

✔️ Expo란?

Expo는 React Native 앱을 쉽게 개발하고 배포할 수 있도록 도와주는 플랫폼입니다.
✔️ 설치 없이 바로 테스트 가능
✔️ 네이티브 빌드 없이 실행 가능
✔️ Expo SDK로 카메라, 위치, 푸시 알림 등 다양한 기능 제공

📌 Expo 프로젝트 생성

npx create-expo-app MyApp
cd MyApp
npx expo start

Expo는 **Expo Go 앱(QR 코드 사용)**을 통해 빠르게 실행할 수 있습니다.

---

6️⃣ 배운 점 & 활용 방안

✅ React Native의 컴포넌트 기반 개발 방식 이해
✅ Props와 State의 차이점을 명확히 구분
✅ FlatList를 사용하여 최적화된 리스트를 렌더링하는 법 익힘
✅ Expo를 활용하면 네이티브 코드 없이도 앱 개발이 가능함

📌 앞으로의 목표

• React Navigation을 활용한 화면 이동 구현
• 네트워크 요청을 통한 데이터 관리 (API 연동)
• State 관리 라이브러리 (Redux, Context API) 적용

---

7️⃣ 개인적인 인사이트

React Native의 컴포넌트 개념을 배우면서 웹 개발과 모바일 개발의 차이점을 명확히 이해할 수 있었습니다.
Expo를 활용하면 빠르게 앱을 테스트할 수 있어 초기 개발 속도를 높일 수 있다는 점이 인상적이었습니다. 🚀
앞으로 상태 관리와 API 연동을 학습하며 더욱 실용적인 모바일 앱을 개발해보고 싶습니다!

---

🔗 참고자료

• React Native 공식 문서: https://reactnative.dev/
• React Navigation: https://reactnavigation.org/
• Expo: https://docs.expo.dev/

React Native · Learn once, write anywhere

 

React Navigation | React Navigation

 

Expo Documentation

 

---

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성되었습니다.