TIL. 40 React - 버튼 컴포넌트

버튼을 컴포넌트화 시켜 사용할 때, 기본적으로 버튼에 사용되는 속성을 미리 지정해놓고 사용 위치에서 해당 내용을 props로 내려주면 간단히 사용이 가능하다.

💡 기본 형태

• Button.js에 기본 버튼 텍스트, 활성화 등 필요한 속성에 대한 props를 지정하고 사용할 위치에서 값을 내려받는 방식을 사용한다.
• Page.js(사용 위치)에서 일반 컴포넌트처럼 사용하며, 원하는 형태의 속성값들을 지정한다.

// Button.js

const Button = ({ disabled, children }) => {
  return <button disabled={disabled}>{children}</button>;
};


// Page.js

const Page = () => {
  return <StyleButton disabled={disabled} children={text} />;
};

💡 CSS 변수를 사용한 버튼 색 변경

• 기본 형태와 마찬가지로 Style을 제작한 후 필요한 부분(색, 사이즈 등)을 용도에 따라 변경할 수 있도록 CSS 변수를 사용해 세팅한다.

// Button.js

const ButtonColor = {
  normal: css`--button-bg-color: #28a745;`,
  select: css`--button-bg-color: #dc3545;`,
};

const Button = ({ disabled, buttonColor, children }) => {
  const buttonStyle = ButtonColor[buttonColor];

  return (
    <StyledButton disabled={disabled} buttonStyle={buttonStyle}>
      {children}
    </StyledButton>
  );
};

const StyledButton = styled.button`
  ${p => p.buttonStyle}

  border: none;
  cursor: pointer;
  padding: 12px 20px;
  color: #fff;
  background-color: var(--button-bg-color, #0d6efd);

  &:disabled {
    cursor: default;
    opacity: 0.5;
    background-color: #fafafa;
  }
`;

// Page.js

const Page = () => {
  return <Button buttonColor="normal" disabled={disabled} children="text" />;
};

디자인 업무를 볼 때, 웹이나 앱 서비스를 살펴보면 공통되는 UI가 많아 디자인 컴포넌트를 활용하기도 한다. 마찬가지로 UI 컴포넌트를 세팅해놓으면 간단한 방법으로 편하게 사용할 수 있다. 버튼 뿐만 아니라 모달에도 사용할 수 있을 것 같고, 자주 활용할 것 같다는 생각이 든다.