React- SASS로 컴포넌트 스타일링- 버튼 outline, full width 옵션 설정

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

 

 버튼 outline, full width 옵션 설정 

outline이라는 옵션을 주면 버튼에서 테두리만 보여지도록 그리고 fullWidth 라는 옵션이 있으면 버튼이 전체 너비를 차지하도록 구현을 해보겠다.

 

components/Btton.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, outline, fullWidth }) {
return <button className={classNames('Button', size, color, {
    outline, // 조건으로 true, false의 블리언 형태로 오기 때문에 객체 형태로 props 넣어줌
    fullWidth // 특별히 기본값을 지정할 필요는 없다. 기본값을 지정안해도 값이 undefined이기 때문에 처리가 되지 않는다.
})}>{children}</button>; // button.scss에 size, color props 값 전달
}

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

export default Button;

outline과 fullWidth 값을 props로 받아와서 classNames()에 객체 형태로 시켜줬는데 이렇게 하면

각각의 값이 true일 때만 Buttom 컴포넌트에 SASS에 설정한 클래스가 적용된다.

 

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%);
    }

    &.outline {
        color: $color; // 파라미터로 받아온 색상을 폰트 색상으로 사용
        background: none; // 배경 없앰
        border: 1px solid $color; // 테두리를 파라미터로 받아온 색상으로 사용
        &:hover { // 컴포넌트에 마우스 포인터를 올릴시 (hover할 시)
            background: $color;
            color: white;
        }
    }
}

.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;
    }

    &.fullWidth {
        width: 100%;
        justify-content: center; // 중앙 정렬, justify-content는 display-flex를 했을 떄만 사용 가능
        & + & {
           margin-left: 0;
           margin-top: 1rem; 
        }
    }
}

위 코드와 같이 outline은 mixin안에 넣어주고 색상별 코드에서 mixin을 사용해주면 되고

fullWidth는 코드 제일 하단에 위 코드와 같이 작성하면 된다.

 

App.scss

.App {
    width: 512px;
    margin: 0 auto;
    margin-top: 4rem;
    border: 1px solid black;
    padding: 1rem;
    .buttons + .buttons {
        margin-top: 1rem;
    }
}

버튼들 전체를 에워싸는 테두리 코드

 

A.pp.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" outline={true}>BUTTON</Button> {/* outline을 true로 설정*/}
        <Button color="gray" outline={true}>BUTTON</Button>
        <Button color="pink" size="large" outline={true}>BUTTON</Button>
      </div>
      <div className="buttons">
        <Button size="large" fullWidth={true}>BUTTON</Button> {/* fullWidth를 true */}
        <Button color="gray" size="large" fullWidth={true}>BUTTON</Button>
        <Button color="pink" size="large" fullWidth={true}>BUTTON</Button>
      </div>
    </div>
    
  );
}

export default App;

App.js 파일에서 버튼 컴포넌트를 위와 같이 불러와준 후 outline과 fullWidth의 props 값을 true로 설정해준다.

 

실행 결과