리파인(Refine)에서 리소스에 자동 라우팅이 되는 이유는 Refine가 특정 규칙에 따라 IResourceItem을 사용해 리소스를 정의하면, 해당 리소스에 대해 자동으로 CRUD(Create, Read, Update, Delete) 페이지를 생성하고 라우트를 설정해주기 때문입니다.

어떻게 리파인에서 자동 라우팅이 이루어지는가?

1. 리소스 정의:
   • IResourceItem 인터페이스를 사용해 리소스를 정의합니다. 이 인터페이스는 리소스의 이름(name), 경로(list, show, create, edit), 메타데이터(예: 아이콘) 등을 포함할 수 있습니다.
2. 자동 라우팅 생성:
   • Refine는 resources 배열에 정의된 각 리소스 항목을 읽고, 해당 리소스에 대해 필요한 기본적인 페이지(목록, 세부 정보, 생성, 편집)를 자동으로 생성합니다.
   • 예를 들어, name: "companies"로 정의된 리소스가 있으면, /companies, /companies/new, /companies/:id, /companies/edit/:id와 같은 경로가 자동으로 라우팅됩니다.
3. 라우팅 설정:
   • Refine는 각 리소스에 대해 자동으로 라우트를 설정합니다. 이때, 라우팅은 해당 리소스가 지원하는 페이지 유형(예: 목록, 생성, 세부 정보, 편집)에 따라 설정됩니다.
   • 이러한 페이지들은 내부적으로 기본 제공되는 컴포넌트들을 사용하여 자동으로 생성됩니다. 예를 들어, 목록 페이지는 List 컴포넌트, 생성 페이지는 Create 컴포넌트를 기본으로 사용합니다.
4. 자동 페이지 생성:
   • Refine는 라우팅 설정에 따라 해당 리소스에 대해 기본적인 CRUD UI 페이지를 자동으로 제공합니다. 이는 개발자가 페이지를 하나하나 수동으로 생성하지 않아도 되는 편리함을 제공합니다.
5. 확장 가능:
   • 기본적으로 제공되는 라우트와 페이지는 필요에 따라 커스터마이징할 수 있습니다. 각 리소스에 대해 특정 페이지 컴포넌트를 오버라이드하거나, 추가적인 설정을 할 수 있습니다.

예시 코드 분석

typescript코드 복사
export const resource: IResourceItem[] = [
  {
    name: "companies",
    list: "/companies",
    show: "/companies/:id",
    create: "/companies/new",
    edit: "/companies/edit/:id",
    meta: {
      label: "Companies",
      icon: <ShopOutlined />,
    },
  },
];

• name: 리소스의 이름입니다. 이 이름은 리소스를 식별하고, 라우팅 및 CRUD 동작에 사용됩니다.
• list, show, create, edit: 리소스와 연결된 경로를 정의합니다. 각각 목록, 세부 정보, 생성, 편집 페이지의 경로입니다.
• meta: 추가적인 메타데이터로, 사이드바 등에 표시될 레이블과 아이콘을 정의할 수 있습니다.

위와 같이 리소스를 정의하면, Refine는 자동으로 다음과 같은 경로를 설정합니다:

• /companies (목록 페이지)
• /companies/new (생성 페이지)
• /companies/:id (세부 정보 페이지)
• /companies/edit/:id (편집 페이지)

이 모든 경로는 Refine의 내부 라우터에 의해 자동으로 처리되며, 지정된 컴포넌트를 통해 각 페이지가 렌더링됩니다.

요약

리파인에서 자동 라우팅이 가능한 이유는 IResourceItem으로 리소스를 정의할 때 Refine가 해당 리소스에 대한 기본적인 CRUD 페이지와 라우팅을 자동으로 생성하기 때문입니다. 이러한 기능은 개발자가 복잡한 라우팅 설정을 직접 할 필요 없이, 간단한 설정만으로 강력한 CRUD 애플리케이션을 빠르게 개발할 수 있도록 도와줍니다.