React Native 시작하기

React Native 시작하기 📱

목차

1. React Native 소개
2. 개발 환경 설정
3. 기본 컴포넌트
4. 기본 기능 구현
5. 실습 예제
6. 다음 학습 주제

학습 팁 💡

• 공식 문서를 자주 참고하세요
• Expo Snack으로 코드를 실험해보세요
• 작은 프로젝트부터 시작하세요
• 컴포넌트를 재사용 가능하게 설계하세요
• 스타일링에 시간을 투자하세요

1. React Native란?

https://reactnative.dev/
https://expo.dev/

React Native는 페이스북이 개발한 모바일 앱 개발 프레임워크입니다. React의 문법을 사용하여 iOS와 Android 앱을 동시에 개발할 수 있습니다.

장점

• 하나의 코드로 iOS/Android 개발 가능
• JavaScript/React 지식 활용 가능
• 빠른 개발 속도와 실시간 미리보기 (Hot Reload)
• 네이티브 성능 제공

React vs React Native

// React (웹)
<div>
  <h1>안녕하세요</h1>
  <p>환영합니다</p>
</div>

// React Native (모바일)
<View>
  <Text>안녕하세요</Text>
  <Text>환영합니다</Text>
</View>

2. 개발 환경 설정

필수 설치 항목

https://docs.expo.dev/get-started/create-a-project/

1. Node.js
2. npm 또는 yarn
3. Expo CLI 또는 React Native CLI
4. Android Studio (안드로이드 개발시)
5. Xcode (iOS 개발시, Mac 필수)

Expo CLI로 시작하기

# Expo CLI 설치
npm install -g expo-cli

# 프로젝트 생성
expo init MyFirstApp

# 프로젝트 실행
cd MyFirstApp
npm start

3. 기본 컴포넌트

주요 컴포넌트

https://reactnative.dev/docs/components-and-apis

• View: 레이아웃을 구성하는 컨테이너
• Text: 텍스트 표시
• Image: 이미지 표시
• ScrollView: 스크롤 가능한 영역
• TextInput: 입력 필드

import { View, Text, Image, ScrollView, TextInput } from 'react-native';

function App() {
  return (
    <View style={{ flex: 1, padding: 20 }}>
      {/* 텍스트 표시 */}
      <Text>안녕하세요!</Text>

      {/* 이미지 표시 */}
      <Image
        source={require('./assets/icon.png')}
        style={{ width: 100, height: 100 }}
      />

      {/* 입력 필드 */}
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        placeholder="여기에 입력하세요"
      />

      {/* 스크롤 가능한 영역 */}
      <ScrollView>
        <Text>스크롤 내용...</Text>
      </ScrollView>
    </View>
  );
}

기본 스타일링

https://reactnative.dev/docs/style

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
    marginBottom: 10,
  },
});

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>스타일 예시</Text>
    </View>
  );
}

4. 기본 기능 구현

컴포넌트 : https://reactnative.dev/docs/components-and-apis

버튼과 터치 이벤트

https://reactnative.dev/docs/button

import { TouchableOpacity, Alert } from 'react-native';

function MyButton() {
  return (
    <TouchableOpacity
      style={{ padding: 10, backgroundColor: 'blue' }}
      onPress={() => Alert.alert('버튼이 눌렸습니다!')}
    >
      <Text style={{ color: 'white' }}>눌러보세요</Text>
    </TouchableOpacity>
  );
}

상태 관리

https://reactnative.dev/docs/intro-react#state

import { useState } from 'react';

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

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

5. 실습 예제: 간단한 할일 목록 앱

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

export default function TodoApp() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim().length > 0) {
      setTasks([...tasks, { id: Math.random().toString(), text: task }]);
      setTask('');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>할일 목록</Text>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={task}
          onChangeText={setTask}
          placeholder="할일을 입력하세요"
        />
        <TouchableOpacity
          style={styles.addButton}
          onPress={addTask}
        >
          <Text style={styles.buttonText}>추가</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.task}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    marginRight: 10,
    borderRadius: 5,
  },
  addButton: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
  },
  task: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
});