Column 컴포넌트 생성하여 코드 정리

App.tsx에 작성된 메인 레이아웃 부분의 코드는 원래 아래와 같았습니다.

function App() {
  return (
    <section className="grid-box">
      <article
        style={{
          overflow: "hidden",
          height: "100%",
        }}
      >
        <div
          style={{
            minWidth: "695.922px",
          }}
        >
          <First />
        </div>
      </article>
      <article
        style={{
          overflow: "hidden",
        }}
      >
        <div
          style={{
            minWidth: "695.922px",
          }}
        >
          <Second />
        </div>
      </article>
      <article
        style={{
          backgroundColor: "black",
        }}
      >
        <div>
          <Third />
        </div>
      </article>
    </section>
  );

First, Second, Third는 각각 그리드 레이아웃에서 열(column)을 담당하고 있습니다.
이 열은 article 태그로 감싸져있는데 위 코드를 보면 반복되는 부분이 보입니다.

<article
  style={{ overflow: 'hidden' }}  
>
  <div style={{ minWidth: '695.922px' }}>
    <First />
  </div>
</article>

위 코드를 Column이라는 컴포넌트로 묶겠습니다.

<Column overflow='hidden' minWidth='695.922px'>
	<First />  
</Column>

가독성이 훨씬 개선됐다고 봅니다.

App.tsx 파일에 작성된 코드는 아래처럼 변경됐습니다.

const MIN_WIDTH = "695.992px";

function App() {
  return (
    <section className="grid-box">
      <Column overflow="hidden" minWidth={MIN_WIDTH}>
        <First />
      </Column>
      <Column overflow="hidden" minWidth={MIN_WIDTH}>
        <Second />
      </Column>
      <Column backgroundColor="black">
        <Third />
      </Column>
    </section>
  );
}

Column 컴포넌트 내부는 아래와 같이 구현했습니다.

import { CSSProperties, FC, PropsWithChildren } from "react";

type Props = Pick<CSSProperties, "overflow" | "minWidth" | "backgroundColor">;

export const Column: FC<PropsWithChildren<Props>> = ({
  children,
  overflow,
  minWidth,
  backgroundColor,
}) => {
  return (
    <article style={{ overflow, backgroundColor }}>
      <div style={{ minWidth }}>{children}</div>
    </article>
  );
};