framework/ReactNative

๐Ÿ“˜ [4ํŽธ] TODO ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด ๊ตฌํ˜„ – Firestore์— ์ €์žฅ๋œ ํ•  ์ผ ๋ชฉ๋ก ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

octo54 2025. 6. 4. 10:54
๋ฐ˜์‘ํ˜•

๐Ÿ“˜ [4ํŽธ] TODO ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด ๊ตฌํ˜„ – Firestore์— ์ €์žฅ๋œ ํ•  ์ผ ๋ชฉ๋ก ๋ถˆ๋Ÿฌ์˜ค๊ธฐ


์ง€๊ธˆ๊นŒ์ง€ ์šฐ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž์˜ ์ž์—ฐ์–ด ์ž…๋ ฅ์„
→ GPT๋กœ ๊ตฌ์กฐํ™”๋œ JSON์œผ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ 
→ Firestore์— ํ•  ์ผ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ์™„๋ฃŒํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ถˆ๋Ÿฌ์™€ ๋ชฉ๋ก์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š”
TODO ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.


๐ŸŽฏ ๋ชฉํ‘œ

โœ… Firestore์—์„œ ํ•  ์ผ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
โœ… ๋‚ ์งœ์ˆœ ์ •๋ ฌ
โœ… ์™„๋ฃŒ ์—ฌ๋ถ€ ํ‘œ์‹œ
โœ… ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ ๋ฐ˜์˜ (onSnapshot ์‚ฌ์šฉ)


๐Ÿ“„ 1. Firestore์—์„œ ํ•  ์ผ ๋ชฉ๋ก ์ฝ๊ธฐ

๐Ÿ“„ services/firebase.js

export const subscribeTodos = (onUpdate) => {
  return firestore()
    .collection('todos')
    .orderBy('date')
    .onSnapshot(snapshot => {
      const todos = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      onUpdate(todos);
    });
};

๐Ÿ“„ 2. ํ•  ์ผ ๋ชฉ๋ก ํ™”๋ฉด ๋งŒ๋“ค๊ธฐ

๐Ÿ“„ screens/TodoListScreen.js

๋ฐ˜์‘ํ˜•
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import { subscribeTodos } from '../services/firebase';

export default function TodoListScreen() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const unsubscribe = subscribeTodos(setTodos);
    return () => unsubscribe();
  }, []);

  const renderItem = ({ item }) => (
    <View style={[styles.todoItem, item.completed && styles.completed]}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.date}>{new Date(item.date).toLocaleString()}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.header}>๐Ÿ“‹ ๋“ฑ๋ก๋œ ํ•  ์ผ</Text>
      <FlatList
        data={todos}
        keyExtractor={item => item.id}
        renderItem={renderItem}
        contentContainerStyle={{ padding: 16 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  header: { fontSize: 24, fontWeight: 'bold', margin: 16 },
  todoItem: { padding: 12, backgroundColor: '#f2f2f2', borderRadius: 8, marginBottom: 10 },
  title: { fontSize: 18 },
  date: { color: '#555' },
  completed: { backgroundColor: '#d3ffd3' },
});

๐Ÿงช 3. App.js์—์„œ ํ™”๋ฉด ์ „ํ™˜

๋‹จ์ˆœ ์˜ˆ์ œ์—์„œ๋Š” ChatScreen ↔ TodoListScreen์„ ์ „ํ™˜ํ•˜๋Š” Navigation ์—†์ด
App.js์—์„œ ํ•˜๋‚˜๋งŒ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

import TodoListScreen from './src/screens/TodoListScreen';

export default function App() {
  return <TodoListScreen />;
}

โ€ป ์ดํ›„ React Navigation์„ ์ ์šฉํ•˜๋ฉด ํƒญ์œผ๋กœ ์ „ํ™˜ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


โœ… ์ด๋ฒˆ ๊ธ€์—์„œ ๊ตฌํ˜„ํ•œ ๊ธฐ๋Šฅ

๊ธฐ๋Šฅ ๊ตฌํ˜„ ์—ฌ๋ถ€

Firestore์—์„œ ํ•  ์ผ ๋ชฉ๋ก ๋ถˆ๋Ÿฌ์˜ค๊ธฐ โœ…
๋‚ ์งœ์ˆœ ์ •๋ ฌ โœ…
์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ โœ…
์™„๋ฃŒ ์—ฌ๋ถ€ ์‹œ๊ฐ์  ๊ตฌ๋ถ„ โœ…

๐Ÿ“˜ ๋‹ค์Œ ๊ธ€ ์˜ˆ๊ณ 

๋‹ค์Œ ํŽธ์—์„œ๋Š” ๊ฐ ํ•  ์ผ์„ **์™„๋ฃŒ ์ฒ˜๋ฆฌ(โœ… ์ฒดํฌ)**ํ•˜๊ฑฐ๋‚˜
์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ, React Native Navigation์„ ์ ์šฉํ•˜์—ฌ
[์ฑ—๋ด‡ ํ™”๋ฉด] ↔ [ํ•  ์ผ ๋ชฉ๋ก] ์ „ํ™˜์ด ๊ฐ€๋Šฅํ•œ ์•ฑ ๊ตฌ์กฐ๋กœ ํ™•์žฅํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.


 

React Native Firestore ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ,React Native ํ• ์ผ ๋ชฉ๋ก,React Native ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ,Firestore ์‹ค์‹œ๊ฐ„ ๋ฆฌ์Šค๋„ˆ,React Native todo list ์˜ˆ์ œ,react native firestore ์ฝ๊ธฐ,react native firestore ๋ฆฌ์ŠคํŠธ ์ •๋ ฌ,react native firebase ํ• ์ผ ์•ฑ,react native firestore snapshot,react native ํ• ์ผ ์กฐํšŒ