React Native 시작하기: 첫 앱 만들기 🚀

 

 

모바일 앱 개발의 세계로 함께 떠나볼까요? 😎

안녕하세요 여러분! 오늘은 React Native로 첫 모바일 앱을 만드는 방법에 대해 알아볼 거예요. 코딩 초보자도 걱정 노노~! 🙌 쉽고 재밌게 설명해드릴게요!

요즘 앱 개발자 수요 미쳤다는 거 아시죠? 재능넷에서도 앱 개발 관련 재능 거래가 급증하고 있어요. 그만큼 배워두면 엄청난 플러스 스킬이 된다는 뜻! 👍

그럼 이제 본격적으로 React Native의 세계로 들어가볼까요? 레츠고~! 🏃‍♀️

1. React Native가 뭐길래? 🤔

React Native는 페이스북에서 만든 오픈소스 프레임워크로, JavaScript를 사용해서 iOS와 Android 앱을 동시에 개발할 수 있게 해주는 엄청난 녀석이에요! 한 번 코드 작성하고 두 플랫폼에서 다 돌아가니까 개발자들 사이에서는 그냥 "갓갓"이라고 불리죠. ㅋㅋㅋ

근데 "리액트 네이티브가 뭐야? 그냥 앱 만드는 거 아냐?" 라고 생각하시는 분들을 위해 조금 더 설명해드릴게요! 😉

전통적인 앱 개발에서는 Android용으로는 Java나 Kotlin을, iOS용으로는 Swift나 Objective-C를 사용해야 했어요. 근데 이러면 두 번 개발해야 하니까 시간도 두 배, 비용도 두 배... 아 머리 아프네요! 🤕

하지만 React Native를 사용하면 JavaScript 하나로 두 플랫폼 앱을 모두 개발할 수 있어요! 개이득 아니겠어요? ㅋㅋㅋ

2. 개발 환경 세팅하기 🛠️

자, 이제 React Native 개발을 위한 환경을 세팅해볼게요! 뭔가 어려울 것 같지만 생각보다 쉬워요. 그냥 따라오세요~ 😊

여기서 우리는 두 가지 방법 중 하나를 선택할 수 있어요:

오늘은 초보자분들을 위해 Expo로 시작하는 방법을 알려드릴게요! 훨씬 간단하고 빠르게 앱을 만들 수 있거든요. 😉

Expo CLI 설치하기

먼저 Node.js를 설치해야 해요. nodejs.org에서 LTS 버전을 다운로드하고 설치하세요.

그 다음, 터미널(맥/리눅스) 또는 명령 프롬프트(윈도우)를 열고 다음 명령어를 입력해주세요:

npm install -g expo-cli

이렇게 하면 Expo CLI가 전역으로 설치돼요! 이제 React Native 앱을 만들 준비가 됐어요! 🎉

3. 첫 React Native 앱 만들기 🎨

드디어 앱을 만들 시간이에요! 두근두근~ 😆

새 프로젝트 생성하기

터미널에서 다음 명령어를 입력해 새 프로젝트를 만들어보세요:

expo init MyFirstApp

그러면 템플릿을 선택하라고 나올 텐데요, 'blank'를 선택하면 가장 기본적인 앱 템플릿으로 시작할 수 있어요.

프로젝트가 생성되면 다음 명령어로 해당 폴더로 이동해주세요:

cd MyFirstApp

그리고 앱을 실행해볼까요?

expo start

이 명령어를 실행하면 QR 코드가 포함된 개발 서버가 브라우저에서 열려요. 이제 다음과 같은 방법으로 앱을 테스트할 수 있어요:

짜잔! 🎉 이제 첫 번째 React Native 앱이 실행됐어요! 화면에는 "Open up App.js to start working on your app!"라는 메시지가 보일 거예요.

App.js 수정하기

이제 코드 에디터(VS Code 같은)로 App.js 파일을 열어볼까요? 이 파일이 앱의 메인 컴포넌트를 포함하고 있어요.

기본 코드를 다음과 같이 변경해볼게요:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>안녕하세요! 내 첫 앱이에요! 😊</Text>
      <Button
        title="눌러보세요!"
        onPress={() => Alert.alert('안녕!', '리액트 네이티브 재밌죠?')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

파일을 저장하면 앱이 자동으로 새로고침되고 변경사항이 바로 반영돼요! 이게 바로 Hot Reloading의 마법이에요! ✨

이제 앱에 텍스트와 버튼이 표시되고, 버튼을 누르면 알림이 뜨는 간단한 앱이 완성됐어요! 짝짝짝! 👏

4. React Native 기본 컴포넌트 이해하기 📱

React Native에서는 웹의 HTML 태그 대신 특별한 컴포넌트를 사용해요. 가장 기본적인 컴포넌트들을 알아볼까요?

이 컴포넌트들을 조합해서 다양한 UI를 만들 수 있어요. 이제 조금 더 복잡한 예제를 만들어볼까요?

간단한 할 일 목록 앱 만들기

App.js를 다음과 같이 수정해볼게요:

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

export default function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const [counter, setCounter] = useState(0);

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

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>나의 할 일 목록 📝</Text>
      
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="할 일을 입력하세요"
          value={task}
          onChangeText={setTask}
        />
        <Button title="추가" onPress={addTask} />
      </View>
      
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.taskItem}>
            <Text style={styles.taskText}>{item.text}</Text>
            <TouchableOpacity onPress={() => deleteTask(item.id)}>
              <Text style={styles.deleteButton}>❌</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
    paddingTop: 50,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    marginRight: 10,
    borderRadius: 5,
  },
  taskItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
    padding: 15,
    borderRadius: 5,
    marginBottom: 10,
  },
  taskText: {
    fontSize: 16,
  },
  deleteButton: {
    fontSize: 16,
  },
});

이 코드는 간단한 할 일 목록 앱을 만들어요. 할 일을 입력하고 추가 버튼을 누르면 목록에 추가되고, ❌를 누르면 삭제돼요.

이 예제에서 우리는 React의 useState 훅을 사용해서 상태를 관리하고 있어요. 이게 React의 핵심 기능 중 하나인데, 컴포넌트의 상태를 쉽게 관리할 수 있게 해줘요.

또한 FlatList라는 컴포넌트를 사용했는데, 이건 긴 목록을 효율적으로 렌더링하기 위한 특별한 컴포넌트예요. 목록이 길어도 성능이 떨어지지 않도록 화면에 보이는 항목만 렌더링한답니다. 똑똑하죠? 😎

5. 스타일링 마스터하기 💅

React Native에서는 CSS를 직접 사용하지 않고, JavaScript 객체를 사용해서 스타일을 정의해요. 이를 StyleSheet이라고 부르죠.

기본적인 스타일링 방법을 알아볼까요?

간단한 스타일링 예제를 볼까요?

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>박스 1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text}>박스 2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>박스 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
    justifyContent: 'space-around',
  },
  box1: {
    backgroundColor: '#FF9800',
    padding: 20,
    borderRadius: 10,
  },
  box2: {
    backgroundColor: '#4CAF50',
    padding: 20,
    borderRadius: 10,
  },
  box3: {
    backgroundColor: '#2196F3',
    padding: 20,
    borderRadius: 10,
  },
  text: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

이 코드는 세 개의 다른 색상 박스를 만들어요. 각 박스는 가운데 정렬된 텍스트를 포함하고 있죠.

Flexbox 레이아웃

React Native에서는 Flexbox를 사용해서 레이아웃을 구성해요. 웹에서의 Flexbox와 비슷하지만 몇 가지 차이점이 있어요.

React Native에서 flexDirection의 기본값은 'column'이에요. 이건 웹 CSS의 기본값인 'row'와 다른 점이니 주의하세요!

Flexbox를 사용한 레이아웃 예제를 볼까요?

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Flexbox 레이아웃</Text>
      </View>
      
      <View style={styles.content}>
        <View style={styles.sidebar}>
          <Text>사이드바</Text>
        </View>
        <View style={styles.main}>
          <Text>메인 콘텐츠</Text>
        </View>
      </View>
      
      <View style={styles.footer}>
        <Text>푸터</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    height: 60,
    backgroundColor: '#4A90E2',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    flexDirection: 'row',
  },
  sidebar: {
    width: 100,
    backgroundColor: '#f0f0f0',
    padding: 10,
  },
  main: {
    flex: 1,
    backgroundColor: '#e0e0e0',
    padding: 10,
  },
  footer: {
    height: 50,
    backgroundColor: '#333',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

이 코드는 헤더, 사이드바가 있는 콘텐츠 영역, 푸터로 구성된 레이아웃을 만들어요. 웹 사이트와 비슷한 구조죠!

6. 앱 배포하기 🚀

앱을 완성했다면 이제 배포할 차례예요! Expo를 사용하면 앱 스토어에 배포하는 과정이 훨씬 쉬워져요.

앱 빌드하기

Expo를 사용해서 앱을 빌드하려면 다음 명령어를 사용해요:

expo build:android  # 안드로이드 앱 빌드
expo build:ios      # iOS 앱 빌드

이 명령어를 실행하면 Expo 서버에서 앱을 빌드하고, 완료되면 다운로드 링크를 제공해요.

Google Play Store에 배포하기

안드로이드 앱을 Google Play Store에 배포하려면:

1. Google Play Console에 개발자 계정 등록 ($25 일회성 비용)
2. 새 앱 등록 및 앱 정보 입력
3. APK 또는 AAB 파일 업로드
4. 스토어 등록정보 작성 (설명, 스크린샷, 아이콘 등)
5. 콘텐츠 등급 설정
6. 가격 및 배포 국가 설정
7. 앱 출시

Apple App Store에 배포하기

iOS 앱을 App Store에 배포하려면:

1. Apple Developer Program 가입 ($99/년)
2. App Store Connect에서 새 앱 등록
3. 앱 정보 입력 및 빌드 업로드
4. 스크린샷 및 메타데이터 제공
5. 심사 제출 (Apple의 심사 과정을 거쳐야 함)
6. 승인 후 출시

참고: iOS 앱을 배포하려면 Mac 컴퓨터가 필요해요! 윈도우나 리눅스에서는 iOS 앱을 빌드할 수 없어요. 😅

앱 배포는 처음에는 복잡해 보일 수 있지만, 한 번 해보면 그렇게 어렵지 않아요! 특히 Expo를 사용하면 빌드 과정이 훨씬 간단해져서 초보자도 쉽게 앱을 배포할 수 있답니다. 👍

7. 다음 단계: 더 배워볼 것들 🧠

React Native의 기본을 배웠으니, 이제 더 고급 주제로 나아갈 준비가 됐어요! 다음은 React Native 개발자로 성장하기 위해 배워볼 만한 주제들이에요.

이런 주제들을 하나씩 배워가면서 앱을 더 풍부하고 전문적으로 만들 수 있어요! 😊

학습 리소스 추천

React Native를 더 깊이 배우고 싶다면 다음 리소스를 추천해요:

React Native는 계속 발전하고 있는 기술이라 항상 새로운 것을 배울 기회가 있어요. 꾸준히 학습하고 실습하면 어느새 실력이 쑥쑥 늘어있을 거예요! 💪

8. 마무리: 첫 앱 개발 여정을 축하해요! 🎉

여기까지 오신 여러분, 정말 대단해요! 이제 React Native의 기본을 이해하고 첫 앱을 만들 수 있게 되었어요. 🥳

오늘 우리가 배운 내용을 정리해볼까요?

앱 개발은 처음에는 어려워 보일 수 있지만, 한 걸음씩 나아가다 보면 어느새 멋진 앱을 만들고 있는 자신을 발견하게 될 거예요! 😊

혹시 앱 개발에 관심이 생겼다면, 재능넷에서 앱 개발 관련 재능을 찾아보는 것도 좋은 방법이에요. 전문가의 도움을 받으면 더 빠르게 성장할 수 있거든요!

마지막으로, 프로그래밍은 실습이 가장 중요해요! 이 글에서 배운 내용을 바탕으로 직접 앱을 만들어보세요. 처음에는 간단한 앱부터 시작해서 점점 복잡한 기능을 추가해나가면 됩니다.

여러분의 첫 앱 개발 여정을 진심으로 응원합니다! 화이팅! 💪