Space

Space

테마의 간격을 사용하는 가로/세로 공간 컴포넌트예요. Space는 Mantine 컴포넌트나 일반 HTML 요소 사이에 테마 기반 간격을 추가해요.

출처: 문서

본문

사용법 (Usage)

Space에 h(가로? 아니라 세로 높이) 또는 w(가로 너비) prop으로 공간을 추가해요. 값은 theme.spacing의 키(xs, sm, md, lg, xl)를 사용해요.

import { Text, Space } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text>First line</Text>
      <Space h="md" />
      <Text>Second line</Text>
    </>
  );
}

각각 h(수직 공간)와 w(수평 공간) prop을 지원해요.

어디에 사용하나요 (Where to use)

대부분의 경우 Mantine 컴포넌트를 다룰 때는 Space 대신 margin prop을 사용하는 것이 좋아요.

import { Space, Text } from '@mantine/core';

// Space는 `mt` prop으로 동일하게 구현할 수 있어 필요하지 않아요
function Demo() {
  return (
    <>
      <Text>First line</Text>
      <Text mt="md">Second line</Text>
    </>
  );
}

하지만 일반 HTML 요소를 다룰 때는 theme.spacing에 접근할 수 없으므로, Space 컴포넌트를 사용하면 테마에 직접 구독하지 않고도 간격을 추가할 수 있어요.

import { Space } from '@mantine/core';

// div에는 margin prop을 사용할 수 없고,
// Space로 테마의 간격을 추가해요
function Demo() {
  return (
    <>
      <div>First line</div>
      <Space h="md" />
      <div>Second line</div>
    </>
  );
}

더 알아보기 (Learn more)

• SimpleGrid
• Splitter