React에서 스프레드 구문을 활용하여 스타일이 다른 버튼 사용

소개

다음과 같은 버튼을 React로 만들 때 같은 모양의 버튼을 페이지 내에서 여러 번 사용할 수있는 기회가 있었고 매번 스타일링하는 것이 번거로웠기 때문에 공통화했을 때 스프레드 구문이 활약했다. 그래서 메모합니다.

버튼 스타일

서두에 나타낸 버튼의 CSS는 이하가 됩니다만, 이것을 버튼 등장의 도 쓰는 것은 귀찮습니다.
이번은 TypeScript 환경이라고 하는 전제이므로, 확장자 tsx 파일로 구현해 갑니다.

App.tsx

import React from 'react';

export const App = () => {
  return (
      <a style={{ textDecoration: "none" }} href="/">
        <div style={{
          backgroundColor: "#000000",
          width: 200,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: 35,
          cursor: "pointer",
          userSelect: "none",
          fontFamily: "Kozuka Gothic Pr6N",
        }}>
          <span style={{ fontSize: 17, color: "#FFFFFF", padding: "10px 0" }}>
            ボタン
          </span>
        </div>
      </a>
  );
}

그래서, 어느 정도 공통의 부분 이외는 prop를 사용해 변경이 효과가 있도록(듯이), 다른 컴퍼넌트로 잘라냅니다.

Button.tsx

import React from 'react'

type ButtonProps = {
  link: string
  title: string
  width: number
  backgroundColor: string
  padding: string
  color: string
  fontSize: number
  fontFamily: string
}

export const Button: React.FC<ButtonProps> = (props) => {
  return (
    <a style={{ textDecoration: "none" }} href={props.link}>
      <div style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 35,
        cursor: "pointer",
        userSelect: "none",
        backgroundColor: props.backgroundColor,
        width: props.width,
        fontFamily: props.fontFamily
      }}>
        <span style={{
          fontSize: props.fontSize,
          color: props.color,
          padding: props.padding
        }}>
          {props.title}
        </span>
      </div>
    </a>
  )
}

그러면 다음과 같이 사용 돌릴 수 있게 되었습니다.

App.tsx

import React from 'react';
import { Button } from './Button';

const App = () => {
  return (
    <div>
      <Button
        title="お問い合わせ"
        width={210}
        backgroundColor="#87CEEB"
        padding="15px 0"
        color="#FFFFFF"
        fontSize={17}
        link="/"
        fontFamily="Kozuka Gothic Pr6N"
      />
    </div>
  );
}

export default App;

또한 버튼별로 어레인지를 하는 경우 스프레드 구문이 도움이 되었습니다.
예를 들어, 공통의 Button 컴퍼넌트에 customButtonStyle 와 customTextStyle 를 더 건네주기로 합니다.

App.tsx

<Button
  link="/"
  title="資料請求はこちらから"
  width={250}
  backgroundColor="#FA8072"
  padding="10px 0"
  color="#FFFFFF"
  fontSize={17}
  fontFamily="Kozuka Gothic Pr6N"
  customButtonStyle={{
    border: "2px solid #DC143C",
    borderRadius: 30,
    boxShadow: "0px 6px 11.96px 1.04px rgba(30, 30, 30, 0.13)",
  }}
  customTextStyle={{
    letterSpacing: 3
  }}
/>

그런 다음 customButtonStyle 및 customTextStyle를 props에 추가합니다. 이것은 건네받을 때와 건네받지 않을 때가 있다고 생각하기 때문에, customButtonStyle? 와 같이 undefined 를 허가합니다.

Button.tsx

import React from 'react'

type ButtonProps = {
  link: string
  title: string
  width: number
  backgroundColor: string
  padding: string
  color: string
  fontSize: number
  fontFamily: string
  customButtonStyle?: React.CSSProperties
  customTextStyle?: React.CSSProperties
}

나중에 ...props.customButtonStyle와 같이 스프레드 구문을 사용하여 CSS를 유연하게 추가 할 수 있습니다.

Button.tsx

<a style={{ textDecoration: "none" }} href={props.link}>
  <div style={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 35,
    cursor: "pointer",
    userSelect: "none",
    backgroundColor: props.backgroundColor,
    width: props.width,
    fontFamily: props.fontFamily,
    ...props.customButtonStyle
  }}>
    <span style={{
      fontSize: props.fontSize,
      color: props.color,
      padding: props.padding,
      ...props.customTextStyle
    }}>
      {props.title}
    </span>
  </div>
</a>

border등을 추가한 버튼(연습용이므로 별로 괜찮지 않지만··)가 생겼습니다!