[React + Supabase] 설치, 셋팅, 간단한 사용법

패키지 설치 및 셋팅

1. 설치

yarn add @supabase/supabase-js

 

2. 프로젝트 만들기

supabase 홈페이지 > start your project > 프로젝트 생성 > Table editor > Create new table

 

보안설정 테스트용이라 해제하지만 production level에서 사용하려면 반드시 체크!

 

Columns를 만든다 > save

 

3. 클라이언트 초기화

src > supabaseClient.js 생성

supabase에서 createClient 임포트해서 프로젝트 URL, 인증키를 넣어줘야 함

import { createClient } from "@supabase/supabase-js";

// 1) project url
const SUPABASE_PROJECT_URL = "YOUR_SUPABASE_URL";

// 2) anon key
const SUPABASE_ANON_KEY = "YOUR_SUPABASE_KEY";

const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);
export default supabase;

 

4. 데이터 추가하기

Table Editor > insert > insert row

 

데이터 불러오기

1. FetchData 컴포넌트 생성

- useEffect로 컴포넌트가 마운트됐을 때 fetch하도록 함

import { useEffect } from "react";
import supabase from "../supabaseclient";

const FetchData = () => {
  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from("NBC_SAMPLE").select("*");

      if (error) console.log("error: ", error);
      else console.log("data: ", data);
    };

    fetchData();
  }, []);
};

export default FetchData;

 

- App.jsx에 임포트

잘 출력되는 걸 확인할 수 있다

 

- 읽어온 유저 정보 state에 받기

import { useEffect, useState } from "react";
import supabase from "../supabaseclient";

const FetchData = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from("NBC_SAMPLE").select("*");

      if (error) console.log("error: ", error);
      else {
        console.log("data: ", data);
        setUsers(data);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>유저 정보</h2>
      {users.map((user) => {
        return (
          <>
            <h5>이름: {user.name}</h5>
            <h5>나이: {user.age}</h5>
            <h5>주소: {user.adress}</h5>
          </>
        );
      })}
    </div>
  );
};

export default FetchData;

 

데이터 추가/삭제/수정

1. 데이터 추가 - insert

import { useState } from "react";
import supabase from "../supabaseclient";

const AddData = () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState("");

  const handleAdd = async () => {
    const { data, error } = await supabase
      .from("NBC_SAMPLE")
      .insert({ name, age, address });

    if (error) console.log("error: ", error);
    else alert("데이터가 정상적으로 입력되었습니다.");
  };

  return (
    <>
      <div>
        이름:
        <input
          type="text"
          value={name}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div>
        나이:
        <input
          type="number"
          value={age}
          onChange={(e) => {
            setAge(e.target.value);
          }}
        />
      </div>
      <div>
        주소:
        <input
          type="text"
          value={address}
          onChange={(e) => {
            setAddress(e.target.value);
          }}
        />
      </div>
      <button type="button" onClick={handleAdd}>
        등록
      </button>
    </>
  );
};

export default AddData;

 

2. 데이터 변경

- update

- eq: 어떤 row를 변경할 것인가

import supabase from "../supabaseclient";
import { useState } from "react";

const UpdateData = () => {
  const [targetId, setTargetId] = useState(0);
  const [address, setAddress] = useState("");

  const handleUpdate = async () => {
    const { error } = await supabase
      .from("NBC_SAMPLE")
      .update({ address })
      .eq("id", targetId);
    if (error) console.log("error: ", error);
  };

  return (
    <>
      <div>
        변경할 정보의 id:
        <input
          type="number"
          value={targetId}
          onChange={(e) => {
            setTargetId(e.target.value);
          }}
        ></input>
      </div>
      <div>
        변경할 주소:
        <input
          type="text"
          value={address}
          onChange={(e) => {
            setAddress(e.target.value);
          }}
        ></input>
      </div>
      <button onClick={handleUpdate}>등록</button>
    </>
  );
};

export default UpdateData;

 

3. 삭제

- delete

- eq: 어떤 걸 삭제할건지

import supabase from "../supabaseclient";
import { useState } from "react";

const DeleteData = () => {
  const [targetId, setTargetId] = useState(0);
  const deleteHandler = async () => {
    const { error } = await supabase
      .from("NBC_SAMPLE")
      .delete()
      .eq("id", targetId);

    if (error) console.log;
  };

  return (
    <>
      <div>
        삭제할 아이디:
        <input
          type="number"
          value={targetId}
          onChange={(e) => {
            setTargetId(e.target.value);
          }}
        />
      </div>
      <button onClick={deleteHandler}>삭제</button>
    </>
  );
};

export default DeleteData;