Refine 연동하기

Refine 연동하기 (Usage with Refine)

Refine은 CRUD 중심의 웹 애플리케이션을 위해 설계된 React 메타 프레임워크예요. 이 글에서는 Refine과 Ant Design을 함께 사용해 완전히 동작하는 CRUD 애플리케이션 예제를 만들어 볼게요.

출처: 문서

본문

Refine은 CRUD가 많은 웹 애플리케이션을 위해 설계된 React 메타 프레임워크예요. 핵심 훅(hook)과 컴포넌트는 인증, 접근 제어, 라우팅, 네트워킹, 상태 관리, i18n 솔루션을 제공해서 개발 과정을 한결 간결하게 만들어 줘요.

Refine은 Ant Design과 연결해 주는 통합 패키지를 지원하며, 여기에 바로 사용할 수 있는 컴포넌트와 훅이 포함되어 있어요.

이 글에서는 Refine과 Ant Design을 사용해서 완전히 동작하는 CRUD 애플리케이션 예제를 부트스트래핑하는 방법을 안내할게요.

설치와 초기화

Refine은 Vite, Next.js, Remix, React Native, Electron 같은 플랫폼과 추가 설정 없이 간단한 라우팅 인터페이스만으로 쉽게 통합돼요.

이 가이드에서는 Vite와 create refine-app CLI의 refine-antd 프리셋을 사용해서, 미리 정의된 옵션으로 Ant Design이 포함된 새 Refine 프로젝트를 빠르게 만들어 볼게요.

시작하기 전에 yarn이나 pnpm을 설치해 두어야 해요.

refine-antd 프리셋을 사용하면 별도의 추가 의존성이 필요 없고, Ant Design으로 만든 예제 페이지까지 포함되어 빠르게 시작할 수 있어요.

초기화가 끝나면 프로젝트로 들어가서 실행해 볼게요.

$ cd antd-demo
$ npm run dev

초기화가 완료되면 모든 Ant Design 설정이 자동으로 끝나서, 여러분의 Refine 앱에서 곧바로 Ant Design 컴포넌트를 사용할 수 있어요.

브라우저에서 http://localhost:5173/ 을 열면 Ant Design 컴포넌트로 만들어진 예제 CRUD 앱을 볼 수 있어요.

Refine Ant Design example

코드 살펴보기

CLI 명령으로 생성된 예제 컴포넌트 중 하나에서 Ant Design이 어떻게 사용되는지 살펴볼게요.

import { Create, useForm } from '@refinedev/antd';
import { Form, Input } from 'antd';

export const CategoryCreate = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label={'Title'} name={['title']} rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

Refine의 통합은 컴포넌트와 훅 묶음을 제공하지만 Ant Design 패키지 자체를 대체하는 것은 아니에요. 일반 React 애플리케이션에서 하던 것과 똑같은 방식으로 Ant Design의 모든 기능을 그대로 사용할 수 있어요.

Refine의 통합은 Ant Design 컴포넌트를 Refine의 기능과 조합해 더 쉽게 사용하도록 돕는 컴포넌트와 훅만 제공할 뿐이에요.

기존 Refine 프로젝트에 Ant Design 추가하기

기존 Refine 프로젝트에 Ant Design을 추가하려면 Refine Ant Design 공식 가이드를 따라 하면 돼요.

Next.js나 Remix처럼 다양한 통합 옵션으로 Refine 앱을 부트스트래핑하려면 npm create refine-app@latest를 사용하고, CLI에서 UI 프레임워크로 Ant Design을 선택하면 돼요.

Ant Design과 관련된 더 자세한 튜토리얼과 가이드는 Refine 문서에서 확인할 수 있어요.

Refine 연동하기