React에서 ConnectBase 시작하기
React에서 ConnectBase 시작하기 — React 앱에 SDK를 연동하고 데이터 바인딩까지 완성하는 입문 가이드
입문프레임워크 연동15초읽기 약 2분업데이트 2026-04-14
React 앱에 SDK를 연동하고 데이터 바인딩까지 완성하는 입문 가이드
이 튜토리얼에서 배울 내용
Context Provider 패턴
useQuery / useMutation 커스텀 훅
데이터 바인딩
로딩/에러 상태 관리
React에서 ConnectBase 시작하기
React 앱에서 ConnectBase를 사용하는 방법을 단계별로 알아봅니다. SDK 설치부터 Context Provider 패턴, 커스텀 훅을 활용한 데이터 바인딩까지 다룹니다.
📌 이 가이드는 React에 대한 기본 지식(컴포넌트, 훅, Context)이 있다고 가정합니다. React가 처음이라면 React 공식 문서를 먼저 확인하세요.
1. 설치
기존 React 프로젝트에 ConnectBase SDK를 추가합니다:
bash
npm install connectbase-client2. Provider 설정
앱 전체에서 하나의 ConnectBase 인스턴스를 공유하기 위해 React Context를 사용합니다.
이렇게 하면 어떤 컴포넌트에서든 useConnectBase()로 SDK에 접근할 수 있습니다.
src/providers/ConnectBaseProvider.tsx:
tsx
import { createContext, useContext, useMemo } from 'react'
import ConnectBase from 'connectbase-client'
const ConnectBaseContext = createContext<ConnectBase | null>(null)
export function ConnectBaseProvider({ children }: { children: React.ReactNode }) {
const cb = useMemo(() => new ConnectBase({
publicKey: import.meta.env.VITE_CONNECT_BASE_PUBLIC_KEY
}), [])
return (
<ConnectBaseContext.Provider value={cb}>
{children}
</ConnectBaseContext.Provider>
)
}
export function useConnectBase() {
const cb = useContext(ConnectBaseContext)
if (!cb) throw new Error('useConnectBase must be used within ConnectBaseProvider')
return cb
}3. 커스텀 훅 만들기
SDK를 직접 호출하는 대신, 재사용 가능한 커스텀 훅으로 감싸면 로딩/에러 상태 관리가 편해집니다.
useQuery 패턴 — 데이터 조회용
typescript
import { useState, useEffect } from 'react'
import { useConnectBase } from '../providers/ConnectBaseProvider'
export function useTableQuery(tableId: string, options?: QueryOptions) {
const cb = useConnectBase()
const [data, setData] = useState<DataItem[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error | null>(null)
useEffect(() => {
setLoading(true)
cb.database
.queryData(tableId, options ?? {})
.then((res) => setData(res.data))
.catch(setError)
.finally(() => setLoading(false))
}, [tableId, JSON.stringify(options)])
return { data, loading, error }
}useMutation 패턴 — 데이터 생성/수정/삭제용
typescript
import { useState, useCallback } from 'react'
import { useConnectBase } from '../providers/ConnectBaseProvider'
export function useTableMutation(tableId: string) {
const cb = useConnectBase()
const [loading, setLoading] = useState(false)
const [error, setError] = useState<Error | null>(null)
const insert = useCallback(async (data: Record<string, unknown>) => {
setLoading(true)
try {
return await cb.database.createData(tableId, { data })
} catch (e) {
setError(e as Error)
throw e
} finally {
setLoading(false)
}
}, [tableId])
const update = useCallback(async (id: string, data: Record<string, unknown>) => {
setLoading(true)
try {
return await cb.database.updateData(tableId, id, { data })
} catch (e) {
setError(e as Error)
throw e
} finally {
setLoading(false)
}
}, [tableId])
const remove = useCallback(async (id: string) => {
setLoading(true)
try {
await cb.database.deleteData(tableId, id)
} catch (e) {
setError(e as Error)
throw e
} finally {
setLoading(false)
}
}, [tableId])
return { insert, update, remove, loading, error }
}4. 사용 예시
위에서 만든 useTableQuery와 useTableMutation 훅을 실제 컴포넌트에서 사용하는 예시입니다.
할 일 목록(Todo)을 조회하고, 체크/삭제하는 기능을 구현합니다.
tsx
import { useTableQuery, useTableMutation } from '../hooks/useTable'
interface Todo {
id: string
title: string
completed: boolean
}
function TodoList() {
const { data: todos, loading } = useTableQuery<Todo>('todos')
const { insert, update, remove } = useTableMutation<Todo>('todos')
if (loading) return <div>Loading...</div>
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => update(todo.id, { completed: !todo.completed })}
/>
{todo.title}
<button onClick={() => remove(todo.id)}>삭제</button>
</li>
))}
</ul>
)
}이 튜토리얼이 도움이 됐나요?