Refine 기본 개념 알아보기

Refine은 CRUD가 많은 웹애플리케이션을 위한 React 기반 프레임워크이다.

위의 이미지와 같이 Refine은 각각의 기능 구현에 필요한 프레임워크 및 라이브러리들을 통합해 하나의 서비스를 구축할 수 있는 환경을 제공한다.

Refine


import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

const App = () => (
  <Refine
    dataProvider={dataProvider("https://api.example.com")}
    resources={[
      {
        name: "posts",
        list: "/posts",
      },
    ]}
  />
);

<Refine> 컴포넌트는 Refine 애플리케이션의 진입점이며, 위의 예시 코드처럼 주입된 props들을 기반으로 동작한다.

이번 글에서는 Refine 애플리케이션에 중심적인 역할을 하는 개념들 몇가지를 정리하고자 한다.

dataProvider


import { Refine } from "@refinedev/core";
import { defaultDataProvider, exampleDataProvider } from "./data-providers";

const App = () => (
  <Refine
    dataProvider={{
      // `default` key must be defined to determine the default data provider
      default: defaultDataProvider,
      example: exampleDataProvider,
    }}
  />
);

dataProvider 는 Refine 애플리케이션과 API를 연결하는 역할을 한다.

dataProvider 는 HTTP 요청을 정의한 메서드를 사용해 응답 데이터를 반환한다.

dataProvider 는 여러 dataProvider 를 주입하여 도메인이 다른 API 호출을 가능하게 한다.

routerProvider

routerProvider 는 <Refine> 에 주입된 resources 를 추론해 다음과 같은 기능을 수행한다.

쿼리 매개변수를 통과, 구문 분석, 동기화하며 탐색 작업 처리

routerProvider 는 react-router, next-router, remix-router 등을 기반으로 구성되어 있다.

resources


import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/json-server";

const App = () => (
  <Refine
    dataProvider={dataProvider("https://api.example.com")}
    resources={[
      {
        name: "posts",
        list: "/posts", // Means that the list action of this resource will be available at /posts in your app
        create: "/posts/create", // Means that the create action of this resource will be available at /posts/create in your app
        edit: "/posts/edit/:id", // Means that the edit action of this resource will be available at /posts/edit/:id in your app
        show: "/posts/show/:id", // Means that the show action of this resource will be available at /posts/show/:id in your app
      },
    ]}
  />
);

resources 는 Refine 애플리케이션의 주요한 역할을 한다.

Refine 애플리케이션은 resources API와 애플리케이션의 페이지를 연결하는 역할을 하여 상호작용하도록 한다.

Refine 톺아보기 - 1

Refine

dataProvider

routerProvider

resources