OSDK React 화면 컴포넌트

@osdk/react-components는 온톨로지의 객체와 액션을 사용하는 화면 구성 요소를 제공합니다. 생성한 OSDK 유형이나 엔터티를 입력으로 전달하면 내부에서 @osdk/react를 통해 데이터 로딩, 캐시와 상태를 관리합니다.

구성 요소

CSS 사용자 정의 속성과 CSS 계층으로 스타일을 조정할 수 있습니다. 직접 만든 컴포넌트와 함께 쓰고, 세부 데이터 처리가 필요하면 @osdk/react 훅을 사용할 수 있습니다.

설치

아래 설정은 Beta 패키지 @osdk/react-components 0.66.0을 사용합니다. React 프로젝트와 앞 장의 OSDK 2.83.0 패키지가 준비된 상태에서 설치합니다. 이 컴포넌트 버전은 @osdk/api, @osdk/client, @osdk/react의 ^2.78.0 범위를 요구합니다.

npm install @osdk/react-components@0.66.0 classnames

앱의 CSS 진입 파일, 예를 들어 src/index.css에 스타일을 불러옵니다. 앱 진입 모듈에서도 이 CSS 파일을 import해야 합니다.

@layer osdk.components;
@import "@osdk/react-components/styles.css" layer(osdk.components);

#root {
  isolation: isolate;
}

isolation은 루트 요소에 portal 격리 범위를 설정합니다. 다른 디자인을 적용할 때는 컴포넌트 스타일 계층보다 우선하는 계층에서 CSS 사용자 정의 속성을 재정의할 수 있습니다.

객체 표

Employee는 생성 SDK에 포함된 객체 유형입니다. @my/osdk는 실제 SDK 패키지 이름으로 바꿉니다. 입력 client는 인증과 온톨로지 설정을 마친 OSDK 클라이언트입니다.

import type { Client } from "@osdk/client";
import { OsdkProvider } from "@osdk/react";
import { ObjectTable } from "@osdk/react-components/object-table";
import { Employee } from "@my/osdk";
import "./index.css";

export function EmployeeDirectory({ client }: { client: Client }) {
  return (
    <OsdkProvider client={client}>
      <ObjectTable objectType={Employee} />
    </OsdkProvider>
  );
}

ObjectTable은 객체 조회와 페이지 이동, 정렬을 처리합니다. 호출하는 클라이언트의 사용자 권한이 조회 가능한 데이터 범위를 결정합니다.

상호작용 예제, 컴포넌트 상태와 API는 OSDK React components Storybook에서 확인할 수 있습니다. 설치와 Provider 구성의 추가 옵션은 설정 안내에 있습니다.