Usage with React Router

Usage with React Router (React Router와 함께 사용하기)

React Router에서 Mantine을 설정하는 방법을 안내해 드릴게요. 새 애플리케이션 생성부터 PostCSS와 Layout 설정까지 설명해요.

출처: 문서

본문

새 애플리케이션 생성

React Router getting started guide를 따라 새 React Router 애플리케이션을 만들어요:

npx create-react-router@latest my-react-router-app

설치

애플리케이션에서 사용할 패키지를 선택하세요:

패키지 설명
@mantine/hooks 상태 및 UI 관리를 위한 훅
@mantine/core 핵심 컴포넌트 라이브러리: 입력, 버튼, 오버레이 등
@mantine/form 폼 관리 라이브러리
@mantine/dates 날짜 입력, 캘린더
@mantine/charts Recharts 기반 차트 라이브러리
@mantine/notifications 알림 시스템
@mantine/code-highlight 테마 색상과 스타일을 적용한 코드 하이라이트
@mantine/tiptap Tiptap 기반 리치 텍스트 에디터
@mantine/dropzone 드래그 앤 드롭으로 파일 받기
@mantine/carousel Embla 기반 캐러셀 컴포넌트
@mantine/lightbox 캐러셀 내비게이션이 있는 전체 화면 미디어 라이트박스
@mantine/spotlight 오버레이 커맨드 센터
@mantine/modals 중앙화된 모달 관리자
@mantine/nprogress 내비게이션 진행률

의존성을 설치해요:

yarn add @mantine/core @mantine/hooks

PostCSS 설정

PostCSS 플러그인과 postcss-preset-mantine을 설치해요:

yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

애플리케이션 루트에 postcss.config.cjs 파일을 만들고 다음 내용을 넣어요:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

설정

app/root.tsx에 스타일 import, MantineProvider, ColorSchemeScript를 추가해요. Mantine 스타일은 애플리케이션의 다른 모든 스타일(React Router 템플릿의 app/app.css 포함)보다 먼저 import해야 해요:

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import './app.css';

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from 'react-router';
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <ColorSchemeScript />
        <Meta />
        <Links />
      </head>
      <body>
        <MantineProvider>{children}</MantineProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

// ... other app/root.tsx content

모든 준비가 끝났어요. 개발 서버를 시작해요:

npm run dev

더 알아보기 (Learn more)