๐ [4ํธ] TODO ๋ฆฌ์คํธ ํ๋ฉด ๊ตฌํ – Firestore์ ์ ์ฅ๋ ํ ์ผ ๋ชฉ๋ก ๋ถ๋ฌ์ค๊ธฐ
๐ [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 ํ ์ผ ์กฐํ