라이선스 적용 및 그리드 생성
라이선스 적용
라이선스는 support.realgrid.com (opens in a new tab) 사이트에서 발급받을 수 있습니다.
라이선스는 기본적으로 전역에 설정되어야 하며, 라이선스를 적용하는 방법은 두가지가 있습니다.
다음과 같이 index.html 파일에 script 태그를 사용하여 라이선스를 적용하시거나 RealGrid.setLicenseKey() 함수를 통해 적용 하실 수 있습니다.
// App.tsx
import RealGrid from "realgrid";
RealGrid.setLicenseKey("라이선스 키");또는
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react</title>
<script>
var realGrid2Lic = "라이선스 키";
</script>
</head>
<body>
<div id="root" style="width: 100%;"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
그리드 생성
우선 RealGrid제품과 RealGridReact, 그리고 realgrid-style을 import 합니다.
gridRef라는 변수를 ref()를 사용해서 선언하고 RealGridReact 컴포넌트에 접근할 수 있도록 ref를 통해 연결 해줍니다.
기본적으로 그리드의 너비(width)와 높이(height) 값은 100%로 설정되어 있으며, 그리드의 컨테이너를 생성한 후 해당 컨테이너 내에 그리드를 배치하거나 직접 width와 height를 적용하여 너비 및 높이를 지정합니다.
import * as RealGrid from 'realgrid'
import { RealGridReact } from 'realgrid-react'
import { useRef } from 'react'
import 'realgrid/dist/realgrid-style.css'
const SampleGrid: React.FC = () => {
const gridRef = useRef<RealGridReact>(null)
return (
<div style={{ width: '100%', height: '550px'}}>
<RealGridReact ref={gridRef}></RealGridReact>
</div>
)
}