7. React, Vue 및 TypeScript에서 사용하기
AUIGrid 서브 컴포넌트(래퍼)는 React와 Vue의 생성 및 해제 시점에 맞춰 그리드를 관리합니다.
칼럼과 속성을 컴포넌트에 전달하고, ref로 데이터 설정과 메서드를 호출합니다.
JavaScript와 TypeScript용 컴포넌트는 각각 제공됩니다. 아래에서 사용 환경에 맞는 예제를 선택하십시오.
Vue 예제는 Vue 3의 script setup을 기준으로 작성했습니다.
7.1 파일 준비와 공통 사용 흐름
배포 패키지의 해당 샘플 프로젝트에서 시작하거나, 래퍼와 제품 파일을 기존 프로젝트에 배치합니다. 샘플 실행 명령은 Vue, React 샘플 실행 방법을 참고하십시오.
- React JavaScript:
samples-React.js의src/static/AUIGrid-React.js/AUIGridReact.js - React TypeScript:
samples-React.tsx의src/static/AUIGrid-React.tsx/AUIGridReact.tsx - Vue JavaScript:
samples-Vue.js의src/static/AUIGrid-Vue.js/AUIGrid.vue - Vue TypeScript:
samples-Vue.ts의src/static/AUIGrid-Vue/AUIGridT.vue
위 경로는 샘플 프로젝트 내부의 경로입니다. 단독 배포 래퍼 폴더 이름과 다를 수 있으므로 실제 복사한 위치에 맞춰 import 경로를 지정하십시오.
src/static/AUIGrid/에 제품 배포본의AUIGrid.js, 접속 환경에 맞는AUIGridLicense.js,AUIGrid_style.css와 해당 CSS가 참조하는images/를 준비합니다.- 래퍼 상단의 엔진, 라이선스 및 CSS import 경로를 확인합니다. 기본 경로는
../AUIGrid/입니다. 래퍼가 엔진을 import하므로 같은 엔진을 별도의 script 태그로 중복 연결하지 않습니다. - TypeScript 프로젝트에는
aui-grid를 설치합니다. 이 패키지는 타입과 enum을 제공하며, 엔진 및 라이선스 파일을 대신하지 않습니다. columnLayout과gridProps를 전달해 컴포넌트를 배치하고, 마운트 후ref로setGridData()를 호출합니다.
npm install aui-grid@latest사용하는 엔진 버전에서 지원하는 API인지도 함께 확인하십시오. 최신 타입에 선언되어 있다는 이유만으로 이전 엔진이 해당 API를 지원하는 것은 아닙니다.
공식 React JavaScript 샘플에는 .js 파일의 JSX를 처리하는 Vite 설정이 포함되어 있습니다.
기존 프로젝트에 래퍼를 옮길 때에는 해당 빌드 설정도 확인하십시오.
Vue 단일 파일 컴포넌트는 프로젝트의 Vue 빌드 도구로 처리합니다.
프레임워크별 문서
- 7.2 React에서 사용하기: JavaScript와 TypeScript 예제,
useRef,bind(), 이벤트 해제 - 7.3 Vue에서 사용하기: JavaScript와 TypeScript 예제, 템플릿 이벤트,
KeepAlive, 비동기 처리 - 7.4 서브 컴포넌트 속성: 실제 기본값, 지원 래퍼,
resizeMode와 크기 설정
editable, height, enableFilter 같은 엔진 속성은 gridProps에 넣습니다.
autoResize, resizeMode 같은 래퍼 속성은 컴포넌트에 직접 지정합니다.
엔진 속성의 전체 목록은 AUIGrid 속성에서 확인할 수 있습니다.