프론트엔드 개발에 있어 CRUD(Create, Read, Update, Delete) 애플리케이션은 기본적이면서도 매우 중요한 개념입니다. 이 글에서는 React를 사용하여 작은 CRUD 애플리케이션을 만들고 Firebase를 통해 데이터를 저장하는 방법을 알아보겠습니다. 이 과정을 통해 React의 기본적인 구성 요소와 Firebase의 데이터베이스 서비스를 익힐 수 있을 것입니다.
1. React와 Firebase에 대한 개요
React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. React를 사용하면 상태에 의존적인 컴포넌트를 쉽게 만들 수 있으며, 각 컴포넌트가 변화하는 데이터에 기반하여 UI를 동적으로 업데이트합니다.
Firebase는 Google이 제공하는 클라우드 기반 플랫폼으로, 백엔드 서비스를 손쉽게 설정할 수 있도록 도와줍니다. 특히, Firestore를 통해 실시간 데이터베이스를 제공하며, 쉽게 데이터를 저장하고 관리할 수 있는 기능을 제공합니다.
2. 프로젝트 환경 설정
먼저, React 애플리케이션을 생성하고 Firebase를 설정해야 합니다. 아래 명령어를 통해 새 React 프로젝트를 생성합니다.
npx create-react-app my-crud-app프로젝트 폴더로 이동한 후 Firebase를 설치합니다.
cd my-crud-app
npm install firebase2.1 Firebase 설정하기
Firebase에서 새로운 프로젝트를 생성한 다음, Firestore 데이터베이스를 활성화합니다. 설치한 Firebase 콘솔에서 API 키 및 관련 설정 정보를 가져와야 합니다.
이러한 Firebase 설정 정보를 사용하여 React 애플리케이션에서 Firebase를 초기화할 수 있습니다. src 폴더 내에 firebase.js 파일을 생성한 후 아래와 같이 설정합니다.
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// Firebase 설정 정보
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Firebase 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };3. CRUD 기능 구현하기
이제 CRUD 기능을 구현해 보겠습니다. 간단한 할 일 목록(to-do list) 애플리케이션을 예시로 들겠습니다. 사용자는 할 일을 추가하고, 볼 수 있고, 수정하고, 삭제할 수 있습니다.
3.1 상태 관리 및 컴포넌트 구조
아래와 같이 컴포넌트 구조를 설정합니다.
- App
- TodoList
- TodoItem
- TodoForm
먼저 App 컴포넌트를 생성하고 상태(state)를 정의합니다.
import React, { useEffect, useState } from 'react';
import { db } from './firebase';
import { collection, getDocs, addDoc, deleteDoc, doc, updateDoc } from 'firebase/firestore';
import TodoList from './components/TodoList';
import TodoForm from './components/TodoForm';
function App() {
const [todos, setTodos] = useState([]);
// Firestore에서 데이터 불러오기
const fetchTodos = async () => {
const todosCollection = collection(db, 'todos');
const todosSnapshot = await getDocs(todosCollection);
const todosList = todosSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setTodos(todosList);
};
// 앱 마운트 시 데이터 불러오기
useEffect(() => {
fetchTodos();
}, []);
// 할 일 추가
const addTodo = async (todo) => {
const docRef = await addDoc(collection(db, 'todos'), todo);
setTodos([...todos, { id: docRef.id, ...todo }]);
};
// 할 일 삭제
const deleteTodo = async (id) => {
await deleteDoc(doc(db, 'todos', id));
setTodos(todos.filter(todo => todo.id !== id));
};
// 할 일 수정
const updateTodo = async (id, updatedTodo) => {
await updateDoc(doc(db, 'todos', id), updatedTodo);
setTodos(todos.map(todo => (todo.id === id ? updatedTodo : todo)));
};
return (
할 일 목록
3.2 TodoForm 컴포넌트
사용자가 할 일을 추가할 수 있도록 Form 컴포넌트를 생성합니다.
import React, { useState } from 'react';
function TodoForm({ addTodo }) {
const [todo, setTodo] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!todo) return;
addTodo({ text: todo });
setTodo('');
};
return (
);
}
export default TodoForm;3.3 TodoList 컴포넌트
할 일 목록을 렌더링하는 컴포넌트를 작성합니다.
import React from 'react';
import TodoItem from './TodoItem';
function TodoList({ todos, deleteTodo, updateTodo }) {
return (
{todos.map(todo => (
);
}
export default TodoList;3.4 TodoItem 컴포넌트
각 할 일을 나타내는 컴포넌트를 생성합니다.
import React, { useState } from 'react';
function TodoItem({ todo, deleteTodo, updateTodo }) {
const [isEditing, setIsEditing] = useState(false);
const [newText, setNewText] = useState(todo.text);
const handleUpdate = () => {
updateTodo(todo.id, { text: newText });
setIsEditing(false);
};
return (
{isEditing ? (
setNewText(e.target.value)}
/>
) : (
{todo.text}
)}
);
}
export default TodoItem;4. Firebase를 이용한 데이터 저장
이제 위 코드를 통해 Firebase와 연동하여 데이터를 저장하는 CRUD 애플리케이션이 완성되었습니다. 사용자가 할 일을 추가하거나 수정, 삭제할 때Firebase Firestore에 데이터가 자동으로 반영됩니다. Firestore의 실시간 데이터베이스를 이용하면, 데이터가 변경될 때마다 UI를 자동으로 업데이트할 수 있습니다.
5. 애플리케이션 실행하기
모든 설정이 완료되면 아래 명령어를 통해 애플리케이션을 실행할 수 있습니다.
npm start브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있습니다.
6. 결론
이번 강좌를 통해 React로 CRUD 애플리케이션을 만들고 Firebase와 연동하여 데이터를 저장하는 방법을 배웠습니다. 앞으로 더 복잡한 애플리케이션을 개발하면서 이번에 배운 기초적인 개념들을 확장해 나갈 수 있을 것입니다. Firebase의 기능을 더욱 활용하여 인증이나 실시간 데이터 처리 등을 추가해 보세요!