Ignite UI for React 19.5.1: 새로운 소식은 무엇인가요?
Grid PDF 내보내기에서 IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, IgrPivotGrid에서 새로운 국제 기반 렌더링 파이프라인 등으로 데이터를 내보낼 수 있습니다. 최신 소식을 정리해 드립니다.
Radoslav Mirchev
6 min read
Ignite UI for React 19.5.1은 현재 npm에서 이용 가능합니다. 이 릴리스는 패키지에 직접 내장된 LLM 에이전트 스킬, 모든 그리드 변형에 대한 PDF 내보내기, 새로운 공개 현지화 API를 포함한 i18n 전면 개편, 동적 스크롤 성능 향상, 그리고 드롭다운 및 대화 상자에 대한 네이티브 Popover API 지원을 제공합니다.
Ignite UI for React 19.5.1의 모든 업데이트를 한눈에 살펴보세요:
- LLM 에이전트 스킬: 3개의 React 특화 스킬 파일이 npm 패키지 내에 포함되어 GitHub Copilot 및 다른 LLM 에이전트에게 일반적인 작업에 대한 단계별 안내를 제공합니다
- Grid PDF Export: export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to PDF
- 그리드 스크롤 성능: 렌더링된 데이터를 기반으로 한 동적 스크롤 스로틀 조정이 대규모 데이터셋에서의 불편함을 줄여줍니다
- Popover API: 드롭다운과 대화 상자는 이제 더 나은 위치 선정과 접근성을 위해 HTML Popover API를 사용합니다
- i18n Overhau l: 새로운 국제 기반 렌더링 파이프라인, 모든 지원 언어에 대한 업데이트된 현지화, 그리고 공개 API가 포함된 새로운
igniteui-i18n-resources패키지 - 문제: CSS 커스텀 속성 접두사 이름 변경; 그리드 어레이 돌연변이 검출이 변경되었고; 채팅 슬롯 API 업데이트; 툴팁
disableArrow제거; Node.js ≥ 22명 필요
npm install igniteui-react@19.5.1 npm install igniteui-react-grids@19.5.1
LLM Agent Skills
세 가지 LLM 에이전트 스킬이 현재 npm 패키지 디렉터리 내에igniteui-reactskills/ 포함되어 있어 GitHub Copilot, Cursor, Windsurf, Claude Code 등 LLM 기반 에이전트들에게 올바른Igr* 컴포넌트, 가져오기 경로, JSX 패턴, 스타일링 접근법 — 모두 React 와igniteui-react 패키지 계열에 특화된 것들을 가르칩니다.
각 스킬은 단계별 지침, 코드 예제,reference/ 그리고 지원 자료의 하위 디렉터리를 포함하는 독립적인 마크다운 파일입니다. 프로젝트당 한 번씩 에이전트에게 연결하면 모든 세션이 자동으로 기준을 따르게 됩니다.
| Skill | 다루는 내용 | 사용 시 |
|---|---|---|
igniteui-react-components | UI 패턴에 적합한Igr* 컴포넌트를 찾아 설치, 가져오고 사용하세요 — JSX 패턴, 이벤트, 참조, 폼 | 부품을 선택하거나 설정하고 React에서 사용하는 과정 |
igniteui-react-customize-theme | CSS 커스텀 속성, Sass, Ignite UI 테마 시스템을 활용해 React 맥락에서 스타일링을 커스터마이즈할 수 있습니다 | Applying custom brand colors or styles |
igniteui-react-optimize-bundle-size | Reduce bundle size with granular imports, tree-shaking, and lazy loading | Optimizing production performance |
스킬을 IDE에 넣기
패키지가 설치되면 스킬은 이미 디스크에 저장되어 있습니다. 에이전트의 검색 경로에 복사하세요 — 구조는 에이전트와 구애받지 않아 스킬 파일을 지원하는 어시스턴트가 직접 사용할 수 있습니다.
# macOS / Linux / Windows (PowerShell) - installed npm package cp -r node_modules/igniteui-react/skills/. .agents/skills/ # Use the npx skills CLI npx skills add IgniteUI/igniteui-react # GitHub Copilot — copy into .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/ # Claude Code — copy into .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-components .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .claude/skills/
커서, 윈드서프 및 기타 에이전트의 경우, 올바른 기술 디렉터리 경로를 위해 에이전트 문서를 참고하세요 — 이 스킬 파일은 스킬 기반 컨텍스트 로딩을 지원하는 모든 어시스턴트와 함께 작동합니다.
View LLM Agent Skills documentation →
Grid PDF Export
네 가지 격자 변형 —IgrGrid,IgrTreeGrid,IgrHierarchicalGrid,, andIgrPivotGrid—는 이제 데이터를 PDF로 직접 내보내는 것을 지원합니다. PDF 내보내기는 기존 Excel 내보내기 파이프라인에 합류하여, 애플리케이션이 서버 측 렌더링 없이 인쇄 가능하고 공유할 수 있는 문서를 네이티브 경로로 제공합니다. 이 기능은 패키지를 통해igniteui-react-grids 제공되며 기존 툴바 인프라와 통합됩니다.
import { IgrGridToolbarExporter } from 'igniteui-react-grids';
// In your toolbar, PDF export is available alongside Excel export
View Grid PDF Export documentation
Grid Scroll Performance
IgrGridIgrTreeGrid,,IgrHierarchicalGrid,그리고IgrPivotGrid 7.0에서 6개의 렌더링 및 변경 감지 최적화를 목표로 했습니다. 10만 행 데이터셋과 100번의 스크롤 연산 결과: ~40–55 FPS vs. ~15–25 FPS 이전(100–150% 개선), 총 블로킹 시간은 ~8–12초에서 ~3–5초로 줄어들었습니다(50–60% 감소).
벤치마크 하드웨어에 대한 영향(10만 행, 100 스크롤 연산)을 측정한 총합:
| Metric | 전에 | 후에 | Delta |
|---|---|---|---|
| Long Tasks Count | ~80–120 | ~30–50 | −50%에서 −60% |
| Avg Long Task Duration | ~80–120ms | ~55–75ms | −30%에서 −40% |
| Total Blocking Time | ~8–12 sec | ~3–5 sec | −50%에서 −60% |
| Frames per second | ~15–25 fps | ~40–55 fps | +100%에서 +150%까지 |
View Grid Virtualization documentation
드롭다운 및 대화 공간용 팝오버 API
드롭다운 메뉴와 대화 상자는 이제 사용자 지정 오버레이 위치 논리 대신 브라우저 네이티브 HTML 팝오버 API를 사용합니다. Popover API는 플로팅 요소를 최상위 레이어에 배치하여 복잡한 레이아웃에서 오랫동안 존재했던 z-index 스태킹 문제를 해결하고, 오버플로우 숨겨진 컨테이너 내 클리핑을 제거합니다. 접근성도 부수적으로 향상됩니다: 집중 관리와 무시 행동이 맞춤형 구현이 아니라 브라우저 네이티브 기대에 부합합니다. 이 변경은 투명하게 이루어지며, API 표면 변경이나 마이그레이션이 필요하지 않습니다.
i18n Overhaul and New igniteui-i18n-resources Package
날짜와 숫자를 렌더링하는 그리드 컴포넌트는 이제 네이티브Intl 기반 파이프라인을 사용하며, Calendar, DatePicker, DateRangePicker 구현도 이에 맞게 업데이트되었습니다. 엔진 변경과 함께 새로운 공개 현지화 API가 추가되었으며, 현재 지원되는 모든 언어에 대한 자원 문자열을 포함한 별도의igniteui-i18n-resources 패키지도 함께 제공됩니다. 사용자 지정 리소스 문자열을 사용하는 애플리케이션은 새로운 패키지와 API로 마이그레이션해야 합니다. 아래에 링크된 이동 가이드를 참고하세요. 콤보, 칩, 입력, 트리, 캐러셀 구성 요소도 새로운 현지화 구현에 포함되었습니다.
npm install igniteui-i18n-resources@19.5.1
View Localization documentation
Breaking Changes & Migration
CSS Custom Property Prefix Rename (Themes)
영향을 받는 것: 테마 설정을 위해 CSS 커스텀 속성을 사용하는 모든 컴포넌트가
변경 사항: 글로벌 CSS 커스텀 속성 접두사가 다른 Ignite UI 라이브러리와 일치하도록 이름이 변경되었습니다. 이전 접두[OLD_PREFIX] 사를 사용하는 속성은 다음으로[NEW_PREFIX] 업데이트되어야 합니다.
마이그레이션: 스타일시트에서 모든 커스텀 속성 참조를 찾아 교체하세요. 이름 변경된 부동산의 전체 목록은 마이그레이션 가이드에서 확인할 수 있습니다.
이동 가이드 보기
그리드 배열 돌연변이 감지 기능 제거
영향을 받았다:IgrGridIgrTreeGridIgrHierarchicalGrid,,IgrPivotGrid,변경된 사항: 바운드data 배열에 직접 돌연변이(푸시, 스플라이스, 인덱스 할당)가 자동으로 재렌더링을 트리거하지 않는다.
마이그레이션: 인플레이스 돌연변이를 새로운 배열 참조로 대체합니다 — 예를setData([...data, newRow])data.push(newRow) 들어, 이는 표준 React 불변성 패턴과 일치하며, 이번 릴리스에서 더 큰 영향력을 가진 행동 변화입니다.
이동 가이드 보기
Chat:typingIndicator 템플릿 렌더러 삭제됨
영향을 받은 것:IgrChat 변경된 사항: 템플릿 렌더러 소품이typingIndicator 제거되었습니다.
마이그레이션:typing-indicator 슬롯 대신
Tooltip: disableArrow Removed
영향을 받은 것:IgrTooltip 변경된 사항: 이전에 폐지된disableArrow 속성이 제거되었습니다.
마이그레이션: 툴팁 사용에서 'disableArrow참조를 제거하세요; 해당 부동산에는 대체 자료가 없었습니다.
Node.js Minimum Version: ≥ 22
영향을 받는 경우: 빌드 환경 및 CI 파이프라인
변경된 점: 최소 필수 Node.js 버전 수가 22개로 줄었어요.
마이그레이션: 업그레이드 전에 Node.js 런타임을 업데이트하세요. CI 파이프라인 설정, Docker 기본 이미지, 로컬 툴체인을 확인하세요.
Ignite UI for React 19.5.1 설치 방법?
# Core package npm install igniteui-react@19.5.1 # Grids package (required for all grid components) npm install igniteui-react-grids@19.5.1 # New: localization resources package npm install igniteui-i18n-resources@19.5.1
Ignite UI for React 19.5.1로 시작하기
오늘 프로젝트를 업데이트하고, AI Copilot Skills, Grid PDF Export, 새로운 i18n API에 접근하기 위해 시작 가이드를 따라가세요. 그리드 데이터 바인딩, 채팅 컴포넌트, 또는 테마 설정용 CSS 커스텀 속성을 사용한다면 업그레이드 전에 마이그레이션 가이드를 꼭 확인하세요.
