[React] 빈 부분은 Margin이 아닌 Spacer 구성 요소를 사용합니다.

개요

리액트 실장 공백 때 CSS의 마진이냐 스페이스어 구성품이냐를 고민해 조사했다.

결론에 따르다

공백은 Margin이 아니라 Spacer 구성 요소로 이루어집니다.
지금부터 그 이유를 설명하겠습니다.

margin으로 공백의 문제점을 설계하다

구성 요소의 독립성을 손상시켜 재사용성이 떨어졌기 때문이다.
예를 들어 다음 구성 요소가 있다고 가정하십시오.

const ComponentA = () => {
  return <div style="margin: 10px">...</div>;
};

나는 이 부품에 다음과 같은 두 가지 문제가 있다고 생각한다.
문제
구성 요소에 따라 페이지 간격이 달라지기 때문에 페이지 간격의 폭을 변경할 수 없습니다. (확장성↘︎).
문제②
구성 요소에 공백이 포함되어 있다면, 구성 요소 내부에 공백이 있는지 확인해야 합니다. 디버깅하기 어렵습니다.↘︎).
문제① 재사용된 유니버설 구성 요소에서 현저해진다.
문제

// PageAではComponentAのmarginを15pxにしたい...
const PageA = () => {
  return (
    <>
      <OtherComponent />
      <ComponentA />
      <OtherComponent />
    </>
  )
}

// PageBではComponentAのmarginを20pxにしたい...
const PageB = () => {
  return (
    <>
      <OtherComponent />
      <ComponentA />
      <OtherComponent />
    </>
  )
}

② 중첩된 구성 요소 등에서 발생하기 쉽다.
문제②

const ComponentB = () => {
  return (
    <>    　
      {/* 何らかのWrapepr component */}
      <Hoge>
        {/* 何らかのWrapepr component */}
        <Fuga>
          <ComponentA /> {/* 余白があるかを知るにはCard内部まで見る必要がある */}
        </Fuga>
      </Hoge>
    </>
  )
}

해결책으로 공백과 구성 요소의 실체를 분리하여 각자의 독립된 것으로 실현하면 된다.
저기, 스페이스라는 조립품이 등장합니다.

Spacer 설치

공백 부분은 구성 요소의 일부분이 아니라 구성 요소 자체입니다.
Spacer.tsx

import React, { FC } from 'react'

type SpacerProps = {
  size: number;
  horizontal?: boolean;
}

export const Spacer: FC<SpacerProps> = ({ size, horizontal }) => {
  return (
    <div
      style={
        horizontal
          ? { width: size, height: 'auto', display: 'inline-block', flexShrink: 0 }
          : { width: 'auto', height: size, flexShrink: 0  }
      }
    />
  )
}

위의 네스트된 어셈블리와 같이 Spacer를 사용합니다.

const ComponentA = () => {
  return <div>...</div>;
};

const ComponentB = () => {
  return (
    <>    　
      <Hoge>
        <Fuga>
          <ComponentA />
          <Spacer size={10}/>
          <ComponentA />
          <Spacer size={10}/>
          <ComponentA />
        </Fuga>
      </Hoge>
    </>
  )
}

결과 공백과 구성 요소의 실체가 명확하게 분리되어 구성 요소가 재사용하기 쉽다.

보태다

공백에 규칙성이 있으면 타사 어셈블리 등을 사용하여 모 피쳐에서 정의할 수 있습니다.같은 스페이스가 여러 개를 쓴 경우 바꿀 수 있는지 확인합니다.
https://chakra-ui.com/docs/layout/stack#usage

spacing으로 페이지 간격을 평균적으로 정의했습니다

총결산

스타일링에는 여러 가지 방법이 있는데 어느 것이 내 고민에 가장 적합하다고 생각하지만, 개인적으로는 스페이스를 통해 공백과 성분을 더욱 명확하게 분리할 수 있다고 생각한다.스페이스를 아직 사용하지 않은 분들은 꼭 연구해 주세요!

참고 문장

https://javascript.plainenglish.io/stop-using-margin-use-spacer-component-instead-953d9b2dbacc
https://zenn.dev/seya/articles/09545c7503baa4