React- SASS로 컴포넌트 스타일링- 버튼색상 설정

※ 강의를 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

버튼 색상 설정 하기

componets/Button.js

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

// size: large, medium, small
// color: blue, pink, gray

function Button({ children, size, color }) {
return <button className={classNames('Button', size, color)}>{children}</button>; // button.scss에 color props 값 전달
}

Button.defaultProps = { // size props 기본값으로 medium
    size: 'medium',
    color: 'blue' // color 기본값으로 blue
};

export default Button;

 버튼의 색상에 blue, gray, pink 색을 설정 할 수 있도록 구현을 하기 위해 classNames에 color props를 추가해준다.

 

components/Button.scss

$blue: #228be6; // 변수 선언시 앞에 $사인 사용해야됨
$gray: #495057;
$pink: #f06595;

@mixin button-color($color) { // 반복 되는 코드가 있을 때 코드를 줄여주는 용도로 사용
    background: $color; // 위에 변수로 지정한 것을 사용
    &:hover { // & 연산자는 button 자기 자신을 가르키게 됨
        background: lighten($color, 10%); // lighten이라는 함수로 밝기를 조절 가능, 두번째 파라미터에는 얼마나 밝게 할지 지정
    }
    &:active { // 클릭 했을 때
        background: darken($color, 10%);
    } 
}

.Button {
    display: inline-flex;
    align-items: center;   // 텍스트를 버튼의 중앙에 위치 시키게 하는 것들
    justify-content: center;
    color: white;
    font-weight: bold;
    outline: none;
    border: none; // 원래 버튼에는 테두리가 있는데 그것을 없앰
    border-radius: 4px; // 둥글게 하는것
    cursor: pointer; // 커서를 올리면 포인터 모양으로 됨

    &.large {
        height: 3rem;
        padding-left: 1rem;
        padding-right: 1ren;
        font-size: 1rem;
    }

    &.medium {
        height: 2.25rem; // 버튼 크기
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem; // 크롬 기본 폰트 크기 16px * 1 rem =16px   
    }

    &.small {
        height: 1.75rem;
        font-size: 0.875rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    &.blue {
        @include button-color($blue); // mixin 사용할 때 이렇게 하면 된다.
    }

    &.pink {
        @include button-color($pink);
    }

    &.gray{
        @include button-color($gray);
    }
    
    & + & { // 버튼 사이 여백
        margin-left: 1rem;
    }
}

&.blue, &.pink, &.gray의 코드가 중복이 되는데 그럴때는 코드의 상단에 보이는 @mixin을 사용하여 $color를 파라미터로 받아와서 내부에 중복되는 코드를 적어주고 코드 하단의 색상 코드처럼 mixin을 사용해주면 코드가 훨씬 간결해진다.

 

App.js

import React from 'react';
import Button from './components/Button';
import './App.scss';

function App() {
 
  return (
    <div className="App">
      <div className="buttons">
        <Button size="small">BUTTON</Button>
        <Button>BUTTON</Button>
        <Button size="large">BUTTON</Button>
      </div>
      <div className="buttons">
        <Button color="gray" size="small">BUTTON</Button> 
        <Button color="gray">BUTTON</Button>
        <Button color="gray" size="large">BUTTON</Button>
      </div>
      <div className="buttons">
        <Button color="pink" size="small">BUTTON</Button>
        <Button color="pink">BUTTON</Button>
        <Button color="pink" size="large">BUTTON</Button>
      </div>
    </div>
    
  );
}

export default App;

위 코드와 같이 Btton 컴포넌트 3개를 만들어 blue, gray, pink 각각의 색상을 지정해준다.( blue는 기본값으로 설정 했기에 지정할 필요가 없음)

 

App.scss

.App {
    width: 512px;
    margin: 0 auto;
    margin-top: 4rem;
    border: 1px solid black;
    padding: 1rem;
    .buttons + .buttons { // 버튼 위 여백
        margin-top: 1rem;
    }
}

각각의 색상을 가지고 있는 버튼들의 사이에 거리를 두기 위해 버튼 위쪽에 바깥 여백을 줌

 

실행 결과