스케줄러와 데이터 그리드는 @needless-ui/react의 React 컴포넌트로도 제공됩니다. 기능, 키보드 조작, 접근성은 Angular와 같고, 스타일시트와 MIT 라이선스도 같습니다. 다른 컴포넌트도 준비하고 있습니다. React 19가 필요하며, Next.js App Router와 Vite에서 동작합니다.
설치
pnpm add @needless-ui/react @needless-ui/css스타일 가져오기
컴포넌트에는 스타일이 들어 있지 않습니다. 앱의 CSS 파일에서 스타일시트를 한 번만 가져옵니다.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';레이어는 Angular에서와 똑같이 동작합니다. 시작하기에서 설명한 대로, 리셋은 nui보다 먼저 선언한 레이어에 넣고, Tailwind CSS를 사용한다면 nui를 Tailwind의 base 레이어와 유틸리티 사이에 둡니다.
스케줄러
컴포넌트마다 엔트리 포인트가 따로 있습니다. 스케줄러는 전달한 events를 표시하고, 사용자가 일정을 옮기거나 새 일정의 시간을 고르면 콜백으로 알려 줍니다. 일정은 앱이 직접 보관합니다.
데이터 그리드
columns는 컴포넌트 밖에서 정의해, 그리드가 렌더링할 때마다 같은 작업을 반복하지 않게 합니다. 편집하면 새 행과 함께 onRowsChange가 호출되며, Excel 내보내기 같은 메서드는 그리드의 ref에 있습니다.
React 방식의 API
React 컴포넌트는 Angular 컴포넌트와 같은 명세를 따르므로, API도 React의 방식으로 옮겨 그대로 대응합니다. 모든 prop은 스케줄러와 데이터 그리드의 API 페이지에 나와 있습니다.
| Angular | React |
|---|---|
모델: [(view)] | 상태: view와 onViewChange, 또는 컴포넌트가 보관하는 defaultView |
출력: (eventClick) | 콜백: onEventClick |
템플릿: <ng-template nuiSchedulerEvent> | 그리는 함수: renderEvent |
메서드: scheduler.next() | ref의 메서드: ref.current.next() |
트리 데이터용 children | getChildren: React에서 children은 요소용으로 쓰입니다 |
locale: 기본값은 앱의 LOCALE_ID | locale: 기본값은 en-US |
서버 사이드 렌더링
두 컴포넌트 모두 서버에서 렌더링되고 브라우저에서 하이드레이션됩니다. 패키지가 두 컴포넌트를 클라이언트 컴포넌트로 표시해 두었으므로, Server Component에서 직렬화할 수 있는 prop으로 렌더링할 수 있고, nuiSchedulerFromIcs 같은 헬퍼는 서버에서 실행됩니다. 콜백은 브라우저로 넘어갈 수 없으므로, 콜백을 받는 컴포넌트는 위의 두 예제처럼 직접 만든 클라이언트 컴포넌트 안에 둡니다.
사용자 환경에 따라 달라지는 것은 브라우저에서 표시될 때까지 기다립니다. 스케줄러의 현재 시각 선과, 오늘이 어느 날인지가 그렇습니다. 서버에서 스케줄러를 렌더링할 때는 defaultDate를 전달하십시오. 서버의 오늘이 사용자의 오늘과 다를 수 있기 때문입니다.