교활한 구성 요소

이 기사에서 한 가지 패턴을 발견했을 수 있습니다. 바로 느끼도록 하기 위한 많은 작은 조정입니다.

끊임없이 물건을 옮기는 것은 혼란스러울 수 있습니다. 약간의 제약을 추가하고 일관된 전략이 사용되도록 하기 위해 저는 저 자신을 위한 작은 React 구성 요소를 만드는 것을 좋아합니다. 다음과 같습니다.

function ShiftBy({ x = 0, y = 0, children, ...delegated }) {
  return (
    <div
      {...delegated}
      style={{
        transform: `translate(${x}px, ${y}px)`,
      }}
    >
      {children}
    </div>
  );
}

사용 방법은 다음과 같습니다.

<section>
  <ShiftBy x={-3}>
    <Heading>Hello world</Heading>
  </ShiftBy>
  <p>This is a paragraph below a heading</p>
</section>

당신이 react에 익숙하지 않더라도, 이 스니펫이 당신에게 그것이 무엇을 하는지에 대한 감각을 줄 수 있기를 바랍니다. 우리의 ShiftBy 구성 요소를 사용하면 축을 따라 몇 픽셀씩 무언가를 이동할 수 있습니다.

나는 의도가 무엇인지 매우 명확하기 때문에 이것을 좋아합니다. 일이 잘 정렬되도록 미세한 조정을 하고 있습니다. 우리는 이미 존재하는 여러 요소에 임의의 CSS를 겉보기에 무작위로 뿌리지 않습니다.
transform: translate 무언가를 바꾸는 가장 덜 침습적인 방법입니다. 여백을 사용하는 것과는 달리 형제자매를 끌어당기지 않습니다.

이 구성 요소가 얼마나 자주 유용한지 알면 놀랄 것입니다. 예를 들어, 정렬되지 않은 목록에서 사용자 지정 글머리 기호로 약간 이동합니다.

항목 1

항목 2

중앙이나 기준선에 정렬하는 것이 옳지 않은 것 같아서 눈에 잘 맞을 때까지 몇 픽셀씩 조정합니다.