Spacer

레이아웃 내에 지정한 높이만큼 빈 수직 여백을 만드는 컴포넌트

개요

두 요소 사이에 원하는 높이의 빈 공간을 삽입하여 수직 간격을 조절하는 레이아웃 유틸리티 컴포넌트입니다.

주요 특징

• ✅ 높이 지정: number(px) 또는 string(CSS 길이)으로 여백 높이 설정
• ✅ 가시성 제어: visible prop으로 선언적 표시/숨김
• ✅ 접근성: aria-hidden으로 스크린리더에서 무시되는 순수 장식 요소
• ✅ 스타일 확장: className, style로 추가 스타일링 가능

기본 사용

height를 지정하지 않으면 기본 8px 높이의 여백을 생성합니다.

<div>위 블록</div>
<Spacer />
<div>아래 블록</div>

높이 지정 (height)

number는 px로 변환되고, string은 CSS 길이 그대로 적용됩니다.

<Spacer height={8} />
<Spacer height={16} />
<Spacer height={32} />
<Spacer height="2rem" />

가시성 제어 (visible)

visible=false이면 여백이 렌더링되지 않아 두 블록이 붙습니다.

<Spacer height={24} visible={true} />
<Spacer height={24} visible={false} />

API Reference

Props

접근성

권장 사항

• ✅ 순수 여백 용도로만 사용 (콘텐츠를 담지 않음)
• ✅ 컴포넌트가 aria-hidden="true"를 적용하여 스크린리더가 건너뜀
• ❌ 의미 있는 간격/구분이 필요하면 Spacer 대신 시맨틱 요소나 구분선 사용

관련 컴포넌트

• Form: 입력 컨트롤 격자 레이아웃 컨테이너
• Hidden: 화면에 표시되지 않는 숨김 데이터 컴포넌트