프론트엔드 개발에 있어 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 firebase

2.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 (
        

            
할 일 목록
            
            
        
    );
}

export default App;

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 (
        

             setTodo(e.target.value)} 
                placeholder="할 일을 입력하세요" 
            />
            추가
        
    );
}

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)} 
                    />
                    수정
                     setIsEditing(false)}>취소
                
            ) : (
                

                    {todo.text}
                     setIsEditing(true)}>수정
                     deleteTodo(todo.id)}>삭제
                
            )}
        
    );
}

export default TodoItem;

4. Firebase를 이용한 데이터 저장

이제 위 코드를 통해 Firebase와 연동하여 데이터를 저장하는 CRUD 애플리케이션이 완성되었습니다. 사용자가 할 일을 추가하거나 수정, 삭제할 때Firebase Firestore에 데이터가 자동으로 반영됩니다. Firestore의 실시간 데이터베이스를 이용하면, 데이터가 변경될 때마다 UI를 자동으로 업데이트할 수 있습니다.

5. 애플리케이션 실행하기

모든 설정이 완료되면 아래 명령어를 통해 애플리케이션을 실행할 수 있습니다.

npm start

브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있습니다.

6. 결론

이번 강좌를 통해 React로 CRUD 애플리케이션을 만들고 Firebase와 연동하여 데이터를 저장하는 방법을 배웠습니다. 앞으로 더 복잡한 애플리케이션을 개발하면서 이번에 배운 기초적인 개념들을 확장해 나갈 수 있을 것입니다. Firebase의 기능을 더욱 활용하여 인증이나 실시간 데이터 처리 등을 추가해 보세요!

7. 참고 자료

• React 공식 문서
• Firebase 공식 문서 (웹)
• Firestore 빠른 시작