Button Component 활용하기

버튼은 아마 페이지마다 자주 쓰는 Component 일 것이다.

나중에 가져다가 쓰면 편할 것 같아서 정리해본다.

 

디자인만 바꾸면 되니깐!!!

 

 

UI / Button.module.css

.button {
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.button:focus {
  outline: none;
}

.button:hover,
.button:active {
  background: #ac0e77;
  border-color: #ac0e77;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}

@media (min-width: 768px) {
  .button {
    width: auto;
  }
}

 

 

Button.js

import React from 'react';

import styles from './Button.module.css';

const Button = props => {
  return (
    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

 

상위 컴퍼넌트에서 prop 으로 type, onClick 이벤트만 내려주면 공통으로 쓸 수 있다.

만약 다른 디자인의 버튼이 또 있고 자주 쓸 것 같다 하면 새로운 Component로 만들어 활용하면 좋을 것 같다.