[React] #04 LocalStorage & FireBase

로컬 스토리지 ?

로컬 스토리지는 웹 브라우저의 기능으로, 웹 애플리케이션에서 클라이언트 측에 데이터를 저장하는 데 사용된다. 로컬 스토리지를 사용하면 브라우저에 데이터를 영구적으로 저장할 수 있다.

사용자의 로컬 컴퓨터에 데이터를 저장합니다.
데이터는 도메인 내에서 동작하며, 다른 도메인에서는 접근할 수 없습니다.
작은 크기의 데이터만 저장할 수 있다.

다음은 로컬 스토리지에 데이터를 저장하고 삭제하는 예제 코드이다.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  // 컴포넌트가 마운트(실행)되었을 때 로컬 스토리지에서 데이터를 가져옴.
  useEffect(() => {
    const storedData = localStorage.getItem('myData');
    if (storedData) {
      setData(storedData);
    }
  }, []);

  // 데이터를 입력하고 저장 버튼을 누르면 로컬 스토리지에 저장한다.
  const handleSaveData = () => {
    localStorage.setItem('myData', data);
    console.log('데이터가 저장됨');
  };

  // 데이터를 삭제하고 로컬 스토리지에서 제거한다.
  const handleClearData = () => {
    localStorage.removeItem('myData');
    setData('');
    console.log('데이터가 삭제됨');
  };

  return (
    <div>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <button onClick={handleSaveData}>저장</button>
      <button onClick={handleClearData}>삭제</button>
    </div>
  );
}

export default App;

파이어베이스 ?

파이어베이스는 구글에서 제공하는 클라우드 기반 플랫폼으로, 실시간 데이터베이스, 인증, 스토리지 등 다양한 기능을 제공한다.

• 데이터는 클라우드에 저장되므로 여러 디바이스에서 동일한 데이터에 접근할 수 있다.
• 실시간 데이터베이스를 제공하여 실시간 업데이트를 처리할 수 있다.
• 사용자 인증 및 권한 관리를 간편하게 처리할 수 있다.
• 다양한 플랫폼(웹, iOS, 안드로이드 등)에서 사용할 수 있는 클라이언트 SDK를 제공한다.
• NoSQL 데이터베이스로 JSON 형식의 데이터를 저장한다.

사용 ?

  파이어베이스는 리액트 애플리케이션과 함께 사용하기 위해 FireBase 클라이언트 SDK를 제공한다.
리액트 컴포넌트에서 파이어베이스의 실시간 데이터베이스나 인증 기능 등을 사용할 수 있는데, 실시간 데이터베이스를 사용하면 리액트 애플리케이션의 상태를 실시간으로 업데이트하거나 여러 디바이스 간에 데이터를 동기화할 수 있다.

아래는 위의 로컬스토리지 코드와 같은 기능을 하는 파이어베이스 예제 코드이다.

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

// Firebase 프로젝트 구성 정보
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// Firebase 초기화
firebase.initializeApp(firebaseConfig);
const database = firebase.database();

function App() {
  const [data, setData] = useState('');

  // 컴포넌트가 실행되었을 때 데이터를 가져옴.
  useEffect(() => {
    const dataRef = database.ref('myData');
    dataRef.on('value', (snapshot) => {
      const storedData = snapshot.val();
      if (storedData) {
        setData(storedData);
      }
    });
  }, []);

  // 데이터를 입력하고 저장 버튼을 누르면 Firebase에 저장함.
  const handleSaveData = () => {
    database.ref('myData').set(data);
    console.log('데이터가 저장됨');
  };

  // 데이터를 삭제하고 Firebase에서 제거함.
  const handleClearData = () => {
    database.ref('myData').remove();
    setData('');
    console.log('데이터가 삭제됨');
  };

  return (
    <div>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <button onClick={handleSaveData}>저장</button>
      <button onClick={handleClearData}>삭제</button>
    </div>
  );
}

export default App;