Divided

자식 요소들 사이에 구분자를 삽입하는 유틸리티 컴포넌트입니다.

Import

import { Divided } from '@liner-engineering/orbit-core';

사용법

텍스트 구분자

<Divided by=" | ">
  <span>첫 번째</span>
  <span>두 번째</span>
  <span>세 번째</span>
</Divided>
// 결과: 첫 번째 | 두 번째 | 세 번째

컴포넌트 구분자

<Divided by={<Separator />}>
  <Card>A</Card>
  <Card>B</Card>
  <Card>C</Card>
</Divided>

리스트 아이템

<Divided by={<span className="dot">·</span>}>
  <span>작성자: John</span>
  <span>2024.01.01</span>
  <span>조회수 100</span>
</Divided>
// 결과: 작성자: John · 2024.01.01 · 조회수 100

API

interface Props {
  by: ReactNode;
  children: ReactNode;
}

function Divided(props: Props): JSX.Element;

Props

Prop	타입	필수	설명
by	ReactNode	예	각 자식 요소 사이에 삽입할 구분자
children	ReactNode	예	구분자로 나눌 자식 요소들

동작 방식

1. children을 배열로 변환
2. 유효한 React 요소만 필터링
3. 각 요소 사이에 by 구분자 삽입
4. 마지막 요소 뒤에는 구분자 삽입하지 않음

예시

function ArticleMeta({ author, date, views }: ArticleMetaProps) {
  return (
    <div className="meta">
      <Divided by={<span className="separator">·</span>}>
        <span>{author}</span>
        <span>{formatDate(date)}</span>
        <span>조회수 {views}</span>
      </Divided>
    </div>
  );
}

주의

children으로 전달된 요소 중 유효한 React 요소(isValidElement)만 렌더링됩니다. 문자열, 숫자 등은 필터링됩니다.