9. React, Vue 및 TypeScript에서 사용하기
AUIPivot 서브 컴포넌트(래퍼)는 React와 Vue의 생성 및 해제 시점에 맞춰 피벗을 관리합니다. 속성을 전달해
컴포넌트를 배치하고, ref로 행, 열, 값 필드와 데이터를 설정합니다.
JavaScript와 TypeScript용 컴포넌트를 각각 제공합니다. 사용 환경에 맞는 예제를 선택하십시오. Vue 예제는 Vue 3의
script setup을 기준으로 작성했습니다.
9.1 파일 준비와 공통 사용 흐름
제품 패키지의 샘플 프로젝트에서 시작하거나, 서브 컴포넌트와 제품 파일을 기존 프로젝트에 배치합니다. 실행 명령은 Vue, React 샘플 실행 방법을 참고하십시오.
-
React JavaScript:
samples-React.js의src/static/AUIPivot-React/AUIPivotReact.jsx -
React TypeScript:
samples-React.tsx의src/static/AUIPivot-React.tsx/AUIPivotReact.tsx -
Vue JavaScript:
samples-Vue.js의src/static/AUIPivot-Vue/AUIPivot.vue -
Vue TypeScript:
samples-Vue.ts의src/static/AUIPivot-Vue/AUIPivotT.vue
위 경로는 샘플 내부의 경로입니다. 패키지 루트의 AUIPivot-React/, AUIPivot-Vue/에도
서브 컴포넌트를 제공합니다. 실제 배치한 위치에 맞춰 import 경로를 지정하십시오.
-
제품 배포본의
AUIPivot.js, 접속 환경에 맞는AUIPivotLicense.js,AUIPivot_style.css, 해당 CSS가 참조하는images/와messages/AUIPivot.messages.kr.js를 준비합니다. -
래퍼 상단의 엔진, 라이선스, 메시지 및 CSS import 경로를 확인합니다. 샘플에서는
../AUIPivot/를 사용합니다. 파일 위치는 프로젝트에 맞게 바꿀 수 있습니다. 래퍼가 엔진을 import하므로 같은 엔진을 script 태그로 중복 연결하지 않습니다. -
TypeScript 프로젝트에는
aui-pivot를 설치합니다. 이 패키지는 타입과EventKindenum을 제공하며, 실행 엔진, 라이선스, CSS 및 서브 컴포넌트는 포함하지 않습니다. -
컴포넌트를 배치하고, 마운트 후
ref로 필드를 설정한 다음setGridData()로 데이터를 입력합니다.
npm install aui-pivot@latest
공식 TypeScript 샘플은 "aui-pivot": "latest"로 의존성을 선언합니다. npm ci는 잠금
파일의 버전을 설치하며, 최신 버전으로 갱신하려면 npm update aui-pivot을 실행합니다.
타입 패키지는 AUIPivot.js 2.7부터 지원합니다. 최신 타입에 선언된 API라도 사용 중인 엔진에서
지원하는지 확인하십시오.
React의 .jsx, .tsx와 Vue의 .vue는 해당 프레임워크의 빌드 도구로
처리합니다. 샘플 프로젝트에는 Vite 설정이 포함되어 있습니다.
프레임워크별 문서
-
9.2 React에서 사용하기: JavaScript와 TypeScript 예제,
useRef, 메소드, 이벤트와 해제 시점 -
9.3 Vue에서 사용하기: JavaScript와 TypeScript 예제, 템플릿 이벤트,
KeepAlive와 비동기 처리 -
9.4 서브 컴포넌트 속성: 기본값, 지원 환경,
resizeMode와 크기 설정
layoutType, height, showPivotPanel 같은 엔진 속성은
pivotProps에 넣습니다. autoResize, resizeMode 같은 래퍼 속성은 컴포넌트에
직접 지정합니다. 엔진 속성의 전체 목록은 AUIPivot 속성에서 확인할 수
있습니다.