더북(TheBook)

9.2.5 버튼 생성

 

방금 설치한 라이브러리를 활용하여 멋진 버튼을 만들어 봅시다. 버튼 컴포넌트는 src/components/Button 디렉터리에 저장하겠습니다. 해당 디렉터리에 다음 파일들을 만들어 보세요.

Button.js

Button.scss

index.js

 

우선 컴포넌트 파일부터 작성합시다.

src/components/Button/Button.js

import React from ‘react’;
import styles from ‘./Button.scss’;
import classNames from ‘classnames/bind’;
 
const cx = classNames.bind(styles);
 
const Button = ({children, ...rest}) => {
  return (
    <div className={cx(‘button’)} {...rest}>
      {children}
    </div>
  );
};
 
export default Button;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.