React

React에서 mdui를 사용할 때는 설치 페이지의 단계에 따라 설치를 완료하기만 하면 됩니다.

참고 사항

React에서 mdui를 사용할 때는 몇 가지 제한 사항이 있습니다. 이러한 제한 사항은 React에서 Web Components를 사용할 때의 일반적인 제한 사항이며, mdui 컴포넌트 라이브러리 자체의 제한 사항은 아닙니다.

이벤트 바인딩

React는 사용자 정의 이벤트를 지원하지 않으므로 mdui 컴포넌트가 제공하는 이벤트를 사용할 때는 먼저 ref 속성을 사용해 컴포넌트의 참조를 가져와야 합니다.

다음은 React에서 mdui 컴포넌트 이벤트를 사용하는 예시입니다:

import { useEffect, useRef } from 'react';
import 'mdui/mdui.css';
import 'mdui/components/switch.js';

function App() {
  const switchRef = useRef(null);

  useEffect(() => {
    const handleToggle = () => {
      console.log('switch is toggled');
    };

    switchRef.current.addEventListener('change', handleToggle);

    return () => {
      switchRef.current.removeEventListener('change', handleToggle);
    };
  }, []);

  return <mdui-switch ref={switchRef}></mdui-switch>;
}

export default App;

JSX TypeScript 타입 선언

TypeScript 파일(.tsx)에서 mdui를 사용하는 경우 TypeScript 타입 선언을 추가해야 합니다. 프로젝트의 .d.ts 파일에 mdui의 타입 선언 파일을 수동으로 가져와야 합니다:

/// <reference types="mdui/jsx.en.d.ts" />