업데이트 안내

Ignite UI for React 버전 관리에서 첫 번째 숫자는 항상 코드가 지원하는 React의 주 버전과 일치하고 두 번째 숫자는 주 버전 릴리스 전용입니다. 주요 릴리스 사이에 호환성이 손상되는 변경이 도입될 수 있습니다. 각 Ignite UI for React 릴리스에 대한 포괄적인 변경 사항 목록은 제품 CHANGELOG에서 확인할 수 있습니다.

From 18.9.0 to 19.0.0

이 릴리스에는 igniteui-react 및 igniteui-react-grids 패키지에서 다음과 같은 변경 사항으로 이어지는 React 구성 요소 내부 중 일부의 주요 재작업이 포함되어 있습니다.

일반적인

Breaking changes

• Ignite UI for React 컴포넌트는 이제 React 함수 컴포넌트를 사용하므로, useRef에서 얻은 참조는 이제 클래스 컴포넌트 인스턴스 대신 네이티브 엘리먼트의 정방향이 됩니다. 대부분의 사용 사례는 변경되지 않은 상태로 유지될 수 있지만 DOM 요소 자체에 액세스하기 위해 추가 속성이 필요하지 않은 것과 같은 변경이 필요할 수 있습니다.
• 구성 요소는 더 이상 모든 속성 유형(예: boolean | string 또는​ ​number | string)에서 대체 문자열 공용 구조체를 허용하지 않습니다. 또한 문자열 공용 구조체 형식은 더 이상 대/소문자를 구분하지 않습니다.

<IgrColumn dataType="String" sortable="true"></IgrColumn>
tsx

Becomes:

<IgrColumn dataType="string" sortable={true}></IgrColumn>
tsx

• 구성 요소 이벤트는 이제 접두사가 붙습니다.

<IgrGrid columnPin={handlePinning}></IgrGrid>
tsx

Becomes

<IgrGrid onColumnPin={handlePinning}></IgrGrid>
tsx

• 구성 요소 이벤트는 첫 번째 인수로 발신자 대신 단일 표준 CustomEvent 인수를 내보냅니다. 따라서 sender.nativeElement와 같은 사용자 정의 속성은 더 이상 사용할 수 없지만 기본 이벤트 속성은 모두 사용할 수 있습니다. 또한 이벤트 인수에 대한 유형은 특정 사용자 지정 이벤트에 대한 별칭으로 사용할 수 있으므로 세부 정보에 액세스하는 사용량은 동일하게 유지됩니다. 새 핸들러 서명을 사용하면 event.detail가 동일하고 event.target은 발신자와 동일한 DOM 요소입니다.

    const handlePinning = (sender: IgrGridBaseDirective, event: IgrPinColumnCancellableEventArgs) => {};
tsx

Becomes:

    const handlePinning = (event: IgrPinColumnCancellableEventArgs) => {}
    // equivalent to
    const handlePinning = (event: CustomEvent<IgrPinColumnCancellableEventArgsDetail>) => {}
tsx

• 구성 요소에는 더 이상 기본적으로 작동하지 않는 name 속성이 없습니다. name 속성은 igniteui-react 구성 요소에만 남아 있으며, 대부분 기본 기능이 있는 IgrInput 및 IgrCombo와 같은 양식 입력입니다.
• Ignite UI for React 구성 요소에는 더 이상 필요하지 않습니다. 열쇠 재산, React 규정에 따라 필요한 경우를 제외하고 문서조사
• ​IgrDataGrid는 더 이상 igniteui-react-grids 패키지의 일부가 아닙니다. igniteui-react-data-grids로 이동되어 igniteui-react-grids를 더 가볍게 만들었습니다.
• 버전 18.9.0 에서는 클래스로 노출된 여러 유형이 있었지만 더 이상 그렇지 않습니다. 이제 유형으로 내보내지며 다음과 같이 사용할 수 있습니다.

const pivotConfiguration = new IgrPivotConfiguration();
tsx

Becomes:

const pivotConfiguration: IgrPivotConfiguration = {
  rows: [],
  columns: [],
  values: []
}
tsx

• IgrButton
  • 주요 변경 내용
    • Clicked 이벤트가 제거되었습니다. 대신 네이티브 onClick을 사용하십시오.
• IgrInput
  • 주요 변경 내용
    • inputOccurred event is renamed to onInput.