Separated

자식 요소들 사이에 구분자를 삽입하여 렌더링하는 컴포넌트입니다.

Props

이름	타입	설명	기본값
with	ReactNode	구분자로 사용할 요소	-
first	boolean	첫 요소 앞에 구분자 추가 여부	false
last	boolean	마지막 요소 뒤에 구분자 추가 여부	false

Usage

기본 사용법

<Separated with=",">
  <span>Apple</span>
  <span>Banana</span>
  <span>Orange</span>
</Separated>
// 출력: Apple,Banana,Orange

첫 요소 앞에 구분자 추가

<Separated with=">" first>
  <span>Home</span>
  <span>Products</span>
  <span>Detail</span>
</Separated>
// 출력: >Home>Products>Detail

마지막 요소 뒤에 구분자 추가

<Separated with="/" last>
  <span>src</span>
  <span>components</span>
  <span>index.tsx</span>
</Separated>
// 출력: src/components/index.tsx/

커스텀 구분자 사용

<Separated with={<span className="divider">|</span>}>
  <span>Menu 1</span>
  <span>Menu 2</span>
  <span>Menu 3</span>
</Separated>

주의사항

• with prop은 필수입니다.
• first와 last prop을 동시에 사용할 수 있습니다.
• 구분자로 ReactNode를 사용할 수 있어 컴포넌트나 스타일링된 요소도 사용 가능합니다.