REACT Supabase

Supabase와 React를 사용하는 방법

---

React Supabase

1. Supabase 소개와 특징

 주요 개념 설명
- Supabase는 오픈 소스 Firebase 대안으로, 데이터베이스, 인증, 스토리지 및 서버리스 함수를 제공하여 빠르게 백엔드 기능을 구현할 수 있도록 합니다.
- 특징:
  - PostgreSQL 기반 데이터베이스를 사용해 강력하고 확장 가능한 데이터베이스 환경을 제공합니다.
  - 실시간 기능: 데이터 변경 사항을 실시간으로 반영합니다.
  - 쉽고 빠른 인증: OAuth 제공자와 연동하여 쉽게 인증 기능을 설정할 수 있습니다.
  - RESTful API 자동 생성: 데이터베이스 테이블에 REST API와 GraphQL API가 자동으로 생성됩니다.

사용 시나리오
- 스타트업이나 소규모 프로젝트에서 백엔드 개발 시간을 줄여줍니다. 특히 데이터베이스와 인증이 필요한 SPA (Single Page Application) 애플리케이션에서 유용합니다.

---

 2. Supabase와 React의 통합 방법

주요 개념 설명
- Supabase 클라이언트 설정: Supabase를 React 애플리케이션과 통합하려면, Supabase 클라이언트를 초기화하여 프로젝트와 연결해야 합니다.
- 연결 설정: Supabase에서 발급한 API 키와 URL을 사용하여 클라이언트를 생성합니다.

예시 코드

// supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-public-anon-key';
export const supabase = createClient(supabaseUrl, supabaseKey);

사용 시나리오
- 데이터베이스 접근: 애플리케이션에서 Supabase 클라이언트를 통해 데이터베이스와 인증 기능을 쉽게 사용할 수 있습니다.
- Supabase 클라이언트를 전역 상태로 관리하여 어디서든 데이터를 불러오거나 인증 상태를 확인할 수 있습니다.

---

3. CRUD 기능 구현을 위한 기본 설정 및 사용법

주요 개념 설명
- CRUD (Create, Read, Update, Delete): Supabase에서 테이블에 데이터를 추가, 읽기, 수정, 삭제하는 기본적인 데이터 조작 방법입니다.
- Supabase 클라이언트를 사용해 각 기능을 쉽게 구현할 수 있습니다.

사용 시나리오
- 게시판이나 Todo 리스트와 같은 애플리케이션에서 데이터 조작을 할 때 유용합니다.

예시 코드

데이터 추가 (Create)

async function addTodo(text) {
    const { data, error } = await supabase.from('todos').insert([{ text }]);
    if (error) console.error(error);
    else console.log('Added:', data);
}

데이터 읽기 (Read)

async function getTodos() {
    const { data, error } = await supabase.from('todos').select('*');
    if (error) console.error(error);
    else return data;
}

 데이터 수정 (Update)

async function updateTodo(id, newText) {
    const { data, error } = await supabase.from('todos').update({ text: newText }).eq('id', id);
    if (error) console.error(error);
    else console.log('Updated:', data);
}

데이터 삭제 (Delete)

async function deleteTodo(id) {
    const { data, error } = await supabase.from('todos').delete().eq('id', id);
    if (error) console.error(error);
    else console.log('Deleted:', data);
}

---

4. 인증 기능 예제: 로그인, 회원가입, 로그아웃

주요 개념 설명
- Supabase의 인증 기능은 이메일/비밀번호 로그인뿐만 아니라 OAuth 제공자(Google, GitHub 등) 연동을 통해 다양한 로그인 옵션을 제공합니다.
- 인증 상태를 클라이언트에서 쉽게 관리할 수 있으며, React 애플리케이션과 연동하여 실시간으로 로그인 상태를 확인할 수 있습니다.

사용 시나리오
- 사용자의 로그인 상태를 기반으로 접근 권한을 관리하는 애플리케이션에서 활용됩니다. 예를 들어, 로그인이 필요한 페이지를 만들거나 특정 사용자의 데이터에만 접근할 수 있도록 할 수 있습니다.

예시 코드

회원가입

async function signUp(email, password) {
    const { user, error } = await supabase.auth.signUp({ email, password });
    if (error) console.error(error);
    else console.log('Signed up:', user);
}

로그인

async function signIn(email, password) {
    const { user, error } = await supabase.auth.signIn({ email, password });
    if (error) console.error(error);
    else console.log('Signed in:', user);
}

로그아웃

async function signOut() {
    const { error } = await supabase.auth.signOut();
    if (error) console.error(error);
    else console.log('Signed out');
}

---

 5. 실습 예제: React에서 Supabase를 사용한 간단한 데이터베이스 연동

주요 개념 설명

React와 Supabase를 활용해 간단한 Todo 리스트 애플리케이션을 구현해봅니다. 사용자 인증과 CRUD 기능을 포함하여 실습합니다.

예시 코드

App 컴포넌트

import React, { useState, useEffect } from 'react';
import { supabase } from './supabaseClient';

function App() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetchTodos();
        checkUser();
    }, []);

    // 유저 로그인 상태 확인
    const checkUser = async () => {
        const { data } = await supabase.auth.getSession();
        setUser(data.session?.user || null);
    };

    // Todo 리스트 가져오기
    const fetchTodos = async () => {
        const { data, error } = await supabase.from('todos').select('*');
        if (error) console.error(error);
        else setTodos(data);
    };

    // Todo 추가
    const addTodo = async () => {
        const { data, error } = await supabase.from('todos').insert([{ text: newTodo }]);
        if (error) console.error(error);
        else {
            setTodos([...todos, ...data]);
            setNewTodo('');
        }
    };

    // Todo 삭제
    const deleteTodo = async (id) => {
        const { error } = await supabase.from('todos').delete().eq('id', id);
        if (error) console.error(error);
        else setTodos(todos.filter(todo => todo.id !== id));
    };

    return (
        <div>
            <h1>Todo List</h1>
            {user ? (
                <>
                    <input
                        value={newTodo}
                        onChange={(e) => setNewTodo(e.target.value)}
                        placeholder="Add a new todo"
                    />
                    <button onClick={addTodo}>Add</button>
                    <ul>
                        {todos.map(todo => (
                            <li key={todo.id}>
                                {todo.text} 
                                <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                            </li>
                        ))}
                    </ul>
                </>
            ) : (
                <p>Please log in to view your todos.</p>
            )}
        </div>
    );
}

export default App;

---