[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지25회차 미션

패스트캠프 프론트앤드 인강 25일차 리액트 컴포넌트 스타일링 sass로 사이즈 props와 컬러 props를 만들어보았다. 

1. 사이즈 props 설정하기

다양한 크기의 버튼을 만들어보자.

 

Button.js

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

//size에는 large, medium, small이 들어간다
//color:blue,pink,grey
export default function Button({ children, size, color }) {
  return <button className={classNames("Button", size, color)}>{children}</button>;
}

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

사이즈에서 받아온값을 className="Button"안에 넣어줘야하는데 넣어줄때 다양한 방법이있다.

 

1.배열과 조인을이용한방법

export default function Button({ children, size }) {
  return <button className={["Button ", size].join(' ')}>{children }</button>;
}

 

2.리터럴로 처리하기

export default function Button({ children, size }) {
  return <button className={`Button %{size}`}>{children }</button>;
}

3.라이브러리(classNames)

문자열, 객체, 배열등의 다양한 옵션들을 사용해 하나의 classnames, 문자열을 생성 할수있는 라이브러리이다.

 

설치는 터미널창을 켠뒤 입력한다.

yarn add classnames

혹은

npm install classnames --save

다양한문자로 조합할수있는 classNames 라이브러리

classNames를 import하고 아래와같이하면된다.

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

//size에는 large, medium, small이 들어간다
export default function Button({ children, size }) {
  return <button className={classNames('Button', size)}>{children}</button>;
}

default값도 세팅해준다.

Button.defaultProps = {
  size : 'medium'
}

default값에도 여러가지방법이있는데 defaultProps가 제일정석적인방법이다.

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

//size에는 large, medium, small이 들어간다
export default function Button({ children, size = 'medium' }) {
  return <button className={classNames('Button', size)}>{children}</button>;
}

or 연산자 사용하기

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

//size에는 large, medium, small이 들어간다
export default function Button({ children, size}) {
  return <button className={classNames('Button', size || 'medium' )}>{children}</button>;
}

 이제 스타일에 적용해보자.

$blue: #228be6; 
$grey: #495057;
$pink: pink;

@mixin button-color($color){
  background: $color; 
  &:hover{ background:lighten($color, 10%) } //색상을 10%밝게해준다 
  &:active{ background:darken($color, 10%) }
}
.Button{ 
  display:inline-flex; 
  align-items: center; 
  justify-content: center; 
  color:#fff; 
  font-weight: bold; 
  outline: none; 
  border:none; 
  border-radius:4px; 
  cursor: pointer; 
  padding-left:1rem; 
  padding-right:1rem; 

  &.large{
    height:3rem;
    font-size:1.25rem;
  }

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

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

  //중복되는애들은 mixin을 사용한다.
  &.blue{
    background: $blue; 
    &:hover{ background:lighten($blue, 10%) } //색상을 10%밝게해준다 
    &:active{ background:darken($blue, 10%) } 
  }

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


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

}

  오른쪽에있는애한테 특정스타일을 넣겠다라는뜻
  .Button + .Button{
    margin-left:1rem;
  }

app.js

import React, { Component } from "react";
import "./Button.scss";
import Button from "./Button";

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="Button">
          <Button size="large" color="grey">버튼입니다.</Button>
          <Button size="medium" color="pink">버튼입니다.</Button>
          <Button size="small">버튼입니다.</Button>

          <Button size="large" color="grey">버튼입니다.</Button>
          <Button size="medium" color="pink">버튼입니다.</Button>
          <Button size="small">버튼입니다.</Button>

          <Button size="large" color="grey">버튼입니다.</Button>
          <Button size="medium" color="pink">버튼입니다.</Button>
          <Button size="small">버튼입니다.</Button>
        </div>
      </div>
    );
  }
}
export default App;

 

&는 자기자신을 가르킨다.

2. 컬러 props 설정하기

다양한 컬러의 버튼을 만들어보자.

컬러는 open-color사이트를 참고하면좋다. 컬러 props는 위 코드를 업데이트해놓았다.

https://yeun.github.io/open-color/

Open Color

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스