레이아웃 구성 연구 - divider 2

레이아웃에서 컴포넌트를 일렬로 배치하고 그 사이에 divider요소를 추가하야 할 때, divider요소는 컴포넌트 사이 간격에서 영향을 주지 않아야 하는 경우 divider를 absolute를 사용하여 gap간격에 영향을 주지 않게 구성할 수 있다.

 

import React from "react";

type LayoutProps = {
  children?: React.ReactNode;
  className?: string;
  divider?: React.ReactNode;
};

const Layout = ({ children, className, divider }: LayoutProps) => {
  const childrenArrray = React.Children.toArray(children);

  const isLast = (index: number) => index + 1 === childrenArrray.length;

  return (
    <div className={className}>
      {childrenArrray.map((child, index) => (
        <React.Fragment key={index}>
          {child}
          {!isLast(index) && divider}
        </React.Fragment>
      ))}
    </div>
  );
};

export default Layout;

 

Layout 컴포넌트의 자식으로 입력받은 children을 배열로 순회하기 위해 먼저 React.Children.toArray함수를 사용하여 배열형태로 변경한다.

 

const childrenArrray = React.Children.toArray(children);

 

childrenArray를 순회하며 마지막 요소를 제외한 index마다 divider를 추가한다.

 

 

사용 예시

 

import Layout from "@/components/layout";
import React from "react";

const TestBox = () => <div className="flex-1 aspect-square bg-blue-100"></div>;

const Divider = () => (
  <div className="relative bg-red-100">
    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -trnaslate-y-1/2  bg-blue-300 rounded-full w-[30px] h-[30px]"></div>
  </div>
);

const LayoutPage = () => {
  return (
    <main>
      <Layout
        divider={<Divider />}
        className="my-[100px] px-32 flex flex-row gap-6"
      >
        <TestBox />
        <TestBox />
        <TestBox />
        <TestBox />
      </Layout>
    </main>
  );
};

export default LayoutPage;

 

 

 

 

 

결과 화면