Next.js에서 Wijmo 사용하기
Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 및 API 라우트를 비롯한 다양한 기능을 제공하는 강력한 React 프레임워크로 현대적인 웹 애플리케이션을 구축하기 위한 견고한 플랫폼을 제공합니다.
Wijmo의 React interop은 Next.js 프로젝트 내에서 Wijmo 컨트롤을 사용할 수 있게 해줍니다. 해당 interop은 Wijmo 컨트롤의 래퍼(wrapper) 역할을 하여 기본 컨트롤 인스턴스를 생성 및 관리하면서 ref 속성을 통해 참조를 제공합니다. 이를 통해 컨트롤 속성과 이벤트를 선언적으로 바인딩하고, React 컴포넌트와 원활하게 통합할 수 있습니다.
type=info
서버 사이드 렌더링(SSR)을 지원하지 않기 때문에, Next.js 애플리케이션에서 Wijmo 컴포넌트를 원활하게 사용하려면 컴포넌트가 클라이언트 측에서만 렌더링되도록 설정해야 합니다. 그렇지 않으면 렌더링에 실패할 수 있습니다. 이를 위해, Wijmo 컴포넌트를 포함하는 파일에 "use client" 지시어를 추가해주시기 바랍니다. 이를 통해 Next.js가 서버 측에서 해당 컴포넌트를 렌더링하려는 시도를 막을 수 있습니다
이번 문서에서는 Next.js 프로젝트에서 Wijmo 컴포넌트를 설정 및 사용하는 과정에 대해 안내합니다.
설치
Wijmo React 컴포넌트는 각 핵심 라이브러리 패키지당 하나의 npm 패키지 세트로 제공하고 있으며 이름에 'react'라는 단어가 포함되어 있습니다.
예를 들어, 'wijmo.react.grid' 패키지는 핵심 'wijmo.grid' 패키지의 컨트롤에 대한 컴포넌트를 나타냅니다. 해당 패키지들은 개별적으로 설치 가능하며 또는 '@mescius/wijmo.react.all' 그룹 패키지를 사용하여 모두 설치할 수 있습니다.
npm install @mescius/wijmo.react.all Wijmo npm 패키지에 대한 자세한 내용은 NPM을 통한 Wijmo 레퍼런싱을 참조하시기 바랍니다.
그런 다음 ESM import 문을 사용하여 모듈을 가져올 수 있습니다. 예를 들어, 아래 import 문은 'wijmo.react.grid' 모듈의 내용을 가져옵니다:
import * as wjcGrid from '@mescius/wijmo.react.grid'; Wijmo 컴포넌트 가져오기
이제 Wijmo React 모듈을 가져와 해당 모듈을 포함하는 컴포넌트를 사용할 수 있습니다. 예를 들어, 아래 코드는 FlexGrid 컴포넌트를 JSX/TSX에 추가해주는 코드입니다.:
'use client'
import { useState } from "react";
import * as WjGrid from "@mescius/wijmo.react.grid";
export default function Home() {
const [data,setData] = useState(getData());
return (
<div>
<WjGrid.FlexGrid itemsSource={data}></WjGrid.FlexGrid>
</div>
);
} 참고: 컴포넌트가 서버 측 컴포넌트인 경우, 파일 상단에 'use client'를 추가하여 클라이언트 컴포넌트로 표시하시기 바랍니다.
Wijmo CSS 추가
Wijmo 컨트롤이 올바르게 보이고 작동하기 위해서는 Wijmo CSS 스타일을 애플리케이션에 불러와야 합니다. 해당 스타일들은 @mescius/wijmo.styles npm 패키지에 포함되어 있습니다.
ESM import 문을 사용하여 애플리케이션의 layout.tsx 루트 파일 또는 Wijmo 컨트롤을 사용하는 컴포넌트에서 스타일을 불러 올 수 있습니다.
import '@mescius/wijmo.styles/wijmo.css'; Next.js 문법
Wijmo 컴포넌트는 Next.js 애플리케이션에서 지정할 때 일관된 명명 규칙을 사용합니다. JavaScript 컨트롤의 속성 및 이벤트 바인딩을 나타내는 이름과 동일한 이름의 속성을 노출합니다.
아래 코드를 참고하여 주시기 바랍니다.:
export default function Home() {
const [amount,setAmount] = useState(100);
const onValueChanged = (sender,args)=>{
console.log("updated amount : "+sender.value);
}
return (
<div>
<WjInpt.InputNumber value={amount}
format="n2"
isReadOnly={false}
valueChanged={onValueChanged}>
</WjInpt.InputNumber>
</div>
);
} 이벤트 바인딩 상세
Wijmo 이벤트 핸들러는 sender와 event argument 즉, 두 개의 매개변수를 가진 함수로 정의됩니다. 컴포넌트 이벤트에 바인딩할 때는 해당 시그니처를 가진 함수의 이름을 바인딩 소스로 지정해야 합니다.
아래 코드를 참고하여 주시기 바랍니다.:
export default function Home() {
const [amount,setAmount] = useState(100);
const onValueChanged = (sender,args)=>{
console.log("updated amount : "+sender.value);
}
return (
<div>
<WjInpt.InputNumber value={amount}
valueChanged={onValueChanged}>
</WjInpt.InputNumber>
</div>
);
} 초기화 이벤트
모든 Wijmo 컴포넌트에는 컨트롤이 페이지에 추가되고 초기화된 후에 발생하는 "initialized" 이벤트가 포함되어 있습니다.
해당 이벤트를 사용하여 JSX/TSX에서 속성을 설정하는 것 외에 추가적인 초기화 작업을 수행할 수 있습니다. 핸들러 함수의 시그니처는 다른 모든 Wijmo 이벤트 핸들러와 동일합니다.
아래 코드를 참고하여 주시기 바랍니다.:
export default function Home() {
const [amount,setAmount] = useState(100);
const onInitControl = (sender,args)=>{
console.log("updated amount : "+sender.value);
}
return (
<div>
<WjInpt.InputNumber value={amount}
initialized={onInitControl}>
</WjInpt.InputNumber>
</div>
);
} 코드로 Wijmo 컨트롤 생성하기
Wijmo 컴포넌트는 Next.js 앱에서 컴포넌트로 사용하도록 설계되었습니다. 코드에서 Wijmo 컨트롤을 생성하려 컴포넌트 대신 Wijmo 컨트롤의 핵심 모듈을 사용해야 합니다. 핵심 모듈은 React interop 모듈과 동일한 이름을 가지지만, 'react' 단어가 포함되지 않습니다. 아래 코드는 코드를 통해 FlexGrid 컨트롤을 생성합니다:
import { FlexGrid } from '@mescius/wijmo.grid';
let flex: FlexGrid | null = null;
useEffect(() => {
if (!flex) {
flex = new FlexGrid('#host_element', {
itemsSource: getData()
})
}
}, [])