24.08.16 React에서 Supabase 사용하기

1. supabase설치

yarn add @supabase/supabase-js

 

2. supabase에서 프로젝트 생성

 

3. new Project

프로젝트명과 데이터베이스 비밀번호를 입력하고 생성한다.

 

3. Table Editor 세팅

해당 프로젝트가 생성된 뒤 Table Editor을 누른다.

Create a new Table을 누르고

프로젝트에 알맞은 데이터 테이블을 만들고, type을 올바르게 지정한 뒤 저장해준다.

 

4. 데이터 직접 추가

생성된 테이블에서 상단 Insert, Insert row를 눌러주면

아까 만들었던 데이터 종류별로 입력할 수 있다.

데이터가 잘 들어가 있다.

 

5. 데이터 Read하기

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

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

    useEffect(() => {
        const fetchData = async () => {
            const { data, error } = await supabase.from("NBCAMP_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}>
                        <h5>이름: {user.name}</h5>
                        <h5>나이: {user.age}</h5>
                        <h5>주소: {user.address}</h5>
                    </div>
                );
            })}
        </div>
    );
};

export default FetchData;

데이터를 가져올때는 supabase.from('테이블명').select('*')을 사용하면 된다.

테이블명

 

정상적인 DB연결

 

 

6. 데이터 Create하기

.insert()를 사용하면 된다. 여기서 데이터를 추가할 때 데이터 형태에 맞추어 객체 형식으로 insert안에 넣어주면 된다.

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("NBCAMP_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;

 

 

7. 데이터 Update하기

데이터 Get 요청처럼 supabase.from()까지는 동일하고, update를 사용한다. update내부에는 객체 형식으로 서버 데이터 형식과 맞게 작성해주면 된다. 여기서는 주소값만 변경하는 로직이므로 address만 들어가있다.

그리고 eq()를 사용하여 어떤 id를 가진 데이터를 변경할 것인지 지정해주면 된다.

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("NBCAMP_SAMPLE").update({ address }).eq("id", targetId);
        if (error) {
            console.log("error", error);
        }
    };
    return (
        <div style={{ border: "1px solid red" }}>
            <h2>데이터 수정</h2>
            <div>
                아이디:
                <input
                    value={targetId}
                    onChange={(e) => {
                        setTargetId(e.target.value);
                    }}
                    type="number"
                />
            </div>
            <div>
                주소:
                <input
                    value={address}
                    onChange={(e) => {
                        setAddress(e.target.value);
                    }}
                    type="text"
                />
            </div>
            <button onClick={handleChange}>수정</button>
        </div>
    );
};

export default UpdateData;

 

8. 데이터 Delete하기

삭제기능에서는 .delete()를 사용하며, 안에 데이터를 넣어줄 필요가 없다. 업데이트와 동일하게 eq()를 사용하여 어떤 키에 어떤 값을 가진 데이터를 삭제할 것인지 지정해주면 된다.

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

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

    const handleDelete = async () => {
        const { error } = await supabase.from("NBCAMP_SAMPLE").delete().eq("id", targetId);
        if (error) {
            console.log("error", error);
        }
    };
    return (
        <div style={{ border: "1px solid red" }}>
            <h2>데이터 수정</h2>
            <div>
                아이디:
                <input
                    value={targetId}
                    onChange={(e) => {
                        setTargetId(e.target.value);
                    }}
                    type="number"
                />
            </div>
            <button onClick={handleDelete}>삭제</button>
        </div>
    );
};

export default DeleteData;