3. Sass : color props 설정하기 - 컴포넌트 스타일링 | 벨로퍼트

버튼 색상 설정하기

이번에는 버튼에 파란색 외의 다른 색상을 설정하는 작업에 대해서 알아보겠습니다. 우리는, 버튼의 색상에 blue, gray, pink 색을 설정 할 수 있도록 구현을 할 것입니다.

개발을 할 때 색상에 대하여 고민이 들 때에는 open-color 를 참조해보세요.

 

우선, Button 에서 color 라는 props 를 받아올 수 있도록 해주고, 기본 값을 blue 로 설정해주세요.

그리고, size 와 마찬가지로 color 값을 className 에 포함시켜주세요.

/src/components/Button.js :

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

Button.defaultProps = {
  size: 'medium',
  color: 'blue'
};

이제 Button.scss 파일도 수정해봅시다.

/src/components/Button.scss :

$blue: #228be6;
$gray: #495057;
$pink: #f06595;

.Button {
  // ...

  // 색상 관리
  &.blue {
    background: $blue;
    &:hover {
      background: lighten($blue, 10%);
    }

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

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

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

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

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

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

코드의 상단에서 색상 변수를 선언해주었고, 하단에서 CSS 클래스에 따라 다른 색상이 적용되도록 코드를 작성해주었습니다.

위 코드를 보면, 반복되는 코드들이 있지요?

 

이렇게 반복이 되는 코드는 Sass 의 mixin 이라는 기능을 사용하여 쉽게 재사용 할 수 있습니다.

한번, button-color라는 mixin 을 만들어서 사용해보겠습니다.

/src/components/Button.scss : 

@mixin button-color($color) {
  background: $color;
  &:hover {
    background: lighten($color, 10%);
  }
  &:active {
    background: darken($color, 10%);
  }
}

.Button {
  // 색상 관리
  &.blue {
    @include button-color($blue);
  }

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

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

어떤가요? 색상 관리쪽 코드가 훨씬 깔끔해졌지요? 이제, 이 색상 관리가 잘 이루어지고 있는지 확인해봅시다.

App 컴포넌트에서 다음과 같이 다른 색상을 가진 버튼들도 렌더링해보세요.

/src/App.js :

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

그러면 이런 결과가 보여질 것입니다.

맨 왼쪽에 있는 버튼들이 서로 너무 붙어있죠? App.scss 를 다음과 같이 수정해보세요.

/src/App.scss :

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