Front-end/React.js
3. Sass : color props 설정하기 - 컴포넌트 스타일링 | 벨로퍼트
AGAL
2020. 7. 13. 23:20
반응형
버튼 색상 설정하기
이번에는 버튼에 파란색 외의 다른 색상을 설정하는 작업에 대해서 알아보겠습니다. 우리는, 버튼의 색상에 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 파일도 수정해봅시다.
$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;
}
}
반응형