[React] React Native로 모바일 앱 개발 – To-Do 앱 만들기 📱

모바일 애플리케이션 개발, 어렵게만 느껴지셨나요? React Native를 활용하면 JavaScript와 React만으로 멋진 모바일 앱을 만들 수 있습니다! 이번 포스트에서는 React Native의 기본 개념을 살펴보고, 간단한 To-Do 앱을 만들어보는 방법을 알려드릴게요. 준비되셨나요? 😊

---

반응형

1. React Native란? 🧐

React Native는 Facebook에서 개발한 오픈 소스 프레임워크로, React를 사용해 iOS와 Android용 모바일 애플리케이션을 개발할 수 있습니다. React와 같은 문법으로 네이티브 앱을 제작할 수 있어 생산성이 크게 향상됩니다.

• 크로스 플랫폼 개발: 한 번 작성한 코드로 iOS와 Android에서 동작하는 앱 개발 가능!
• React의 장점 활용: 컴포넌트 기반 개발과 빠른 업데이트가 가능합니다.
• 네이티브 기능 통합: 카메라, 위치, 센서 등 네이티브 API에 접근할 수 있습니다.

---

2. 프로젝트 시작하기 🚀

먼저 React Native 프로젝트를 생성해 봅시다.

1. React Native CLI 설치:
2. npm install -g react-native-cli
3. 새 프로젝트 생성:
4. npx react-native init TodoApp cd TodoApp
5. 프로젝트 실행: Android 에뮬레이터 또는 iOS 시뮬레이터에서 앱을 실행해 보세요.
6. npx react-native run-android # Android npx react-native run-ios # iOS

---

3. To-Do 앱 만들기 📝

To-Do 앱은 사용자가 해야 할 작업을 추가하고 완료할 수 있는 간단한 애플리케이션입니다.

예제 코드:

App.js 파일을 다음과 같이 작성해 보세요:

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

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

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

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

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>To-Do List</Text>
      <TextInput
        style={styles.input}
        placeholder="Add a new task"
        value={task}
        onChangeText={setTask}
      />
      <TouchableOpacity style={styles.addButton} onPress={addTask}>
        <Text style={styles.addButtonText}>Add</Text>
      </TouchableOpacity>
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.taskContainer}>
            <Text style={styles.taskText}>{item.text}</Text>
            <TouchableOpacity onPress={() => deleteTask(item.id)}>
              <Text style={styles.deleteButton}>Delete</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
  addButton: {
    backgroundColor: '#007bff',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
    marginBottom: 20,
  },
  addButtonText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  taskContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  taskText: {
    fontSize: 16,
  },
  deleteButton: {
    color: 'red',
    fontWeight: 'bold',
  },
});

---

4. 주요 개념 설명 🛠️

• State 관리: useState를 사용해 입력값과 작업 목록을 관리합니다.
• FlatList: 효율적인 목록 렌더링을 위해 React Native의 FlatList를 사용합니다.
• TouchableOpacity: 버튼이나 클릭 가능한 영역을 쉽게 구현할 수 있습니다.

---

5. 확장 아이디어 💡

이제 기본 To-Do 앱을 완성했으니, 추가 기능을 구현해 보세요!

• 완료 상태 추가: 작업을 완료로 표시하는 체크박스 기능.
• 작업 필터링: 완료된 작업과 미완료 작업을 필터링.
• 로컬 저장소 사용: AsyncStorage를 활용해 앱을 닫아도 작업 목록 유지.

---

6. 마무리 🎉

React Native를 활용해 모바일 앱 개발이 얼마나 쉬운지 느껴보셨나요? 이제 여러분만의 To-Do 앱을 만들어보세요. 추가 기능을 더해 더 멋진 앱으로 발전시킬 수도 있습니다. 🚀

React Native로 세상을 바꿀 첫 걸음을 내딛어보세요. 여러분의 멋진 아이디어를 기다리고 있습니다! 😊