Usage with JavaScript

Usage with JavaScript (JavaScript와 함께 사용하기)

Mantine을 JavaScript 프로젝트에서 사용하는 방법과, TypeScript를 권장하는 이유를 설명해 드릴게요.

출처: 문서

본문

JavaScript로 Mantine을 사용할 수 있나요?

네, 모든 @mantine/* 패키지(다른 모든 npm 패키지도 마찬가지로)를 JavaScript로 사용할 수 있어요. @mantine/* 패키지는 TypeScript로 작성되고 타입 정의가 있으므로, JavaScript에서 사용할 때도 TypeScript의 일부 이점(IDE 자동완성 같은)을 얻을 수 있어요.

데모 코드를 JavaScript로 변환하기

Mantine 문서의 모든 데모는 TypeScript로 작성돼요. 대부분의 경우 TypeScript와 JavaScript 코드 사이에 차이가 없어서 아무것도 할 필요 없어요.

TypeScript 코드를 JavaScript로 변환하려면 TypeScript playground를 사용할 수 있어요. 데모 코드를 playground에 붙여넣으면 모든 타입이 제거돼요. 코드에서 타입 import도 제거해야 한다는 점에 주의하세요.

변환된 코드 예시:

// TypeScript code
import { Button, ButtonProps } from '@mantine/core';

interface MyButtonProps extends ButtonProps {
  myProp: string;
}

function MyButton({ myProp, ...others }: MyButtonProps) {
  return <Button {...others} />;
}

// JavaScript code
import { Button } from '@mantine/core';

function MyButton({ myProp, ...others }) {
  return <Button {...others} />;
}

JavaScript로 Mantine을 써야 할까요?

Mantine은 TypeScript와 함께 사용하는 것을 권장해요. TypeScript에 대한 깊은 지식이 필요하지 않고, 코드를 더 견고하고 유지보수하기 쉽게 만들어요. 예를 들어 컴포넌트에 잘못된 props를 전달하거나 존재하지 않는 props를 사용하면 타입 오류가 발생해요. TypeScript는 새 버전으로 마이그레이션할 때도 도움이 돼요. 코드에 있는 props/컴포넌트가 제거/이름 변경/변경되면 타입 오류로 알려주거든요.

아직 TypeScript에 익숙하지 않다면 Mantine을 TypeScript로 사용하는 것이 배울 좋은 기회가 될 거예요. 어떤 템플릿이든 사용할 수 있어요. 모두 기본적으로 TypeScript를 지원해요.

더 알아보기 (Learn more)