다양한 Button 만들기

저번 시간에는 파란색 버튼 1가지를 만들어보았다. 

 

오늘은 더 나아가 다양한 색과 크기의 버튼을 만들어볼까한다.

 

본격적으로 코딩을 하기 이전에 새롭게 라이브러리를 설치해야한다. 기존의 작업을 좀 더 수월히 하기 위해서이다.

 

터미널을 열고 다음과 같이 입력을 해주면 된다.

 

>yarn add classnames

 

이 라이브러리는 다양한 옵션으로 class의 이름을 조합하여 사용할 수 있도록 도와준다. 다음 그림을 보면 좀 더 이해하기 쉬우리라 본다.

 

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
classNames(['foo', 'bar']); // => 'foo bar'

// 동시에 여러개의 타입으로 받아올 수 도 있습니다.
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// false, null, 0, undefined 는 무시됩니다.
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

 

 

 

 

기존에 작성했던 Button.js 를 아래와 같이 수정해준다. 

 

import React from 'react';
import classNames from 'classnames';
import './Button.scss';


function Button({children, size}){

    return( <button className={classNames('Button', size)}>{children}</button>);

}

/* 아래와 같이 classNames()를 쓰지 않고도 작성할 수 있다.
function Button({children, size}){

    return( <button className={`Button ${size}`}>{children}</button>);

}
*/

Button.defaultPros={
    size: 'medium'/*default값을 정해준다*/
};

export default Button;

 

 

기존에 작성했던 Button.scss도 다음과 같이 작성해준다.

 

$blue: #228be6;// 주석;

.Button{
    display: inline-flex;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;


    padding-left: 1rem;
    padding-right: 1rem;

    &.large{
     height: 2.25 rem;
    
     font-size: 1rem;
    }

    &.medium{
        height: 2.25rem;
        font-size: 1rem;

    }

    &.small{
        height: 2.25rem;
        font-size: 0.875rem;
    }
    
    background: $blue;

    &:hover{
        background: lighten($blue, 10%);
    }

    &:active{
        background: darken($blue, 10%);
    }
    
}

 

저장한 다음 페이지를 열어보면 다음과 같이 나타난다. 

 

 

BUTTON

 

 

 

 

버튼들이 너무 붙어있어서 답답한 느낌을 주기에 버튼들을 일정하게 띄어놓도록 하겠다. 번거롭겠지만 Button.scss에 다음과 같이 코드를 추가해준다. 기존의 .Button{  }안에 추가해주어야한다. 

 

 

 

 

& + & {
    margin-left: 1rem;
  }

 

 

 

 

 

 

물론 &를 쓰지 않고 .Button{  }의 외부에 다음과 같이 작성해도 같은 효과를 낼 수 있다. 

 

 

 

.Button+.Button{

   margin-left: 1rem;

}

 

 

이렇게 작성하여 렌더링을 진행하면 웹에서는 다음과 같은 형태로 나타난다.