supabase에 대해 알아보자.

Supabase란?

Supabase는 PostgreSQL을 사용하여 관계형 데이터를 관리하면서도,
실시간으로 데이터 변화를 감지하고 반응할 수 있는 기능을 제공합니다.

---

React에서 Supabase사용하기

1. 설치 및 셋팅

npm i @supabase/supabase-js

• vsCode에서 터미널을 켜고 해당 명령어를 입력하여 패키지를 설치한다.

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

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

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

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

• 설치가 완료된 후, Supabase클라이언트를 초기화하는 코드를 작성한다.

---

2. Supabase를 활용한 CRUD

// src > App.jsx
import "./App.css";
import AddData from "./components/AddData";
import DeleteData from "./components/DeleteData";
import FetchData from "./components/FetchData";
import UpdateData from "./components/UpdateData";

function App() {
  return (
    <>
      <h1>Supabase</h1>
      <DeleteData />
      <FetchData />
      <UpdateData />
      <AddData />
    </>
  );
}

export default App;

• 예시를 위한 코드입니다.

---

2-1. 데이터 읽기

// src > components > FetchData.jsx
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("NACAMP_SAMPLE").select("*");
      if (error) {
        console.log("error => ", error);
      } else {
        console.log("data => ", data);
        setUsers(data);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h3>유저정보</h3>
      {users.map((user) => {
        return (
          <div
            key={user.id}
            style={{
              border: "1px solid black",
            }}
          >
            <h5>아이디 : {user.id}</h5>
            <h5>이름 : {user.name}</h5>
            <h5>나이 : {user.age}</h5>
            <h5>주소 : {user.address}</h5>
          </div>
        );
      })}
    </div>
  );
};

export default FetchData;

• select("*")을 사용하여 모든 데이터를 불러온후, state에 담아줍니다.

• 이후 map을 활용하여 데이터를 뿌려줍니다.

---

2-2. 데이터 추가

// src > components > AddData.jsx
import React, { 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("NACAMP_SAMPLE").insert({
      name,
      age,
      address,
    });

    if (error) {
      console.log("error => ", error);
    } else {
      alert("데이터가 정상적으로 입력됐습니다.");
      console.log("data => ", data);
    }
  };

  return (
    <div
      style={{
        border: "1px solid red",
      }}
    >
      <h2>데이터 추가 로직</h2>
      <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 onClick={handleAdd}>등록</button>
    </div>
  );
};

export default AddData;

• insert({})를 사용하여 데이터를 추가할 수 있습니다.

---

2-3. 데이터 수정

// src > components > UpdateData.jsx
import React, { useState } from "react";
import supabase from "../supabaseClient";

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

  const handleChange = async () => {
    const { error } = await supabase
      .from("NACAMP_SAMPLE")
      .update({
        address,
      })
      .eq("id", targetId);

    if (error) {
      console.log("error => ", error);
    }
  };

  return (
    <div
      style={{
        border: "1px solid blue",
      }}
    >
      <h2>데이터 수정 로직</h2>
      아이디 :{" "}
      <input
        type="number"
        value={targetId}
        onChange={(e) => setTargetId(e.target.value)}
      />
      <br />
      수정주소 :{" "}
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <button onClick={handleChange}>변경</button>
    </div>
  );
};

export default UpdateData;

• update({})를 활용하여 수정할 수 있습니다.

• .eq("id", targetId) : 이 로직은 해당 id가 targetId인 데이터를 수정한다는 뜻입니다.

---

2-4. 데이터 삭제

// src > components > DeleteData.jsx
import React, { useState } from "react";
import supabase from "../supabaseClient";

const DeleteData = () => {
  const [targetId, setTargetId] = useState(0);

  const handleDelete = async () => {
    const { error } = await supabase
      .from("NACAMP_SAMPLE")
      .delete()
      .eq("id", targetId);

    if (error) {
      console.log("error => ", error);
    }
  };

  return (
    <div
      style={{
        border: "1px solid blue",
      }}
    >
      <h2>데이터 삭제 로직</h2>
      아이디 :{" "}
      <input
        type="number"
        value={targetId}
        onChange={(e) => setTargetId(e.target.value)}
      />
      <button onClick={handleDelete}>삭제</button>
    </div>
  );
};

export default DeleteData;

• delete()를 활용하여 데이터를 지워줄 수 있습니다.

• 마찬가지로 eq()를 사용하여 해당 id값을 가진 데이터만 지워줍니다.

---

회고

• redux, react-router-dom, supabase 세 가지를 공부했다.
  redux와 supbase는 처음 듣는 개념이었는데 잘 사용하면 편리하고 좋겠다는 생각이 들었다.

• 숙련주차에 알게된 개념들을 실제 프로젝트에서 얼마나 쓸 수 있을까?

• 내일 숙련주차 개인과제가 주어질텐데...
  잘해봅시다. 화이팅.

---

그럼이만