100. 재사용 가능한 "카드" 컴포넌트 추가하기

 

 

 

재사용 가능한 Button을 만들어 보았다

Button.js

import styles from "./Button.module.css";
const Button = (props) => {
  return <button className={`${styles.btn} ${props.className}`}>{props.children}</button>
}

export default Button;

{props. Children} 을 통해서 컴포넌트 내에 입력한 값을 가져오고
styles.btn 부분을 통해서 class로 btn 을 지정 그리고 props.className을 통해 기존 컴포넌트에 있던 class가 있다면 가져온ㄷ

 

Button.module.css

.btn {
  background-color: purple;
  margin: 0.7rem 0;
  width: 35%;
  color: #fff;
  box-shadow: 2px 2px 2px rgb(0, 0, 0, 0.2);
}