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

우리가 만든 버튼 컴포넌트에 다양한 옵션을 주는 방법을 알아본다.

다양한 버튼 사이즈

Button 컴포넌트에 size라는 props를 만들어준다.

large,medium, small 이 3가지 옵션을 주고 기본값은 medium이 되도록 해 줄 것이다.

className을 설정할 것인데. className을 효율적으로 설정해주기위해 {}내에 배열을 하나 주고 'Button' 과 size를 join(' ')으로 감싸준다.

이렇게하면

Button 과 size (large, medium, small 중 하나) 가

Button medium 이런식으로 들어가게 된다.

템플릿 리터럴을 사용해서 구현할 수도 있다.

return <button className={`Button ${size}`}>{children}</button>;

앞으로 여러 props를 받아올 것이기 때문에 하나하나 class로 넣어주는것이 번거로울 수 있다.

그래서 classnames라는 라이브러리를 사용해 볼 것이다.

classnames라는 라이브러리를 사용하면 버튼에 조건부 스타일링, 조건부로 className을 적용할 때 굉장히 쉽게 할 수 있다.

이 라이브러리는

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', {bar:true}); // => 'foo bar'
classNames({'foo-bar' : true}); // => 'foo-bar'
classNames({'foo-bar' : false}) // => ''
classNames({foo : true}, {bar : true}); // => 'foo bar'
classNames({foo : true}, bar: true}); // => 'foo bar'
classNames(['foo', 'bar']); //=> 'foo bar'

이런식으로 다양한 옵션으로 문자열을 조합할 수 있는 라이브러리다.

라이브러리 설치를 진행해준다.

$ yarn add classnames

그리고 Button 컴포넌트에서

import 시켜준다

import classNames from 'classnames';

그리고

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

classNames를 사용해준다.

이제 Button의 defaultProps도 생성해준다.

//Button.js
Button.defaultProps = {
  size: "medium",
};

이 방법 말고도

function Button({ children, size  = 'medium'}) {

을 사용해도 같은 효과를 볼 수 있다.

그리고

function Button({ children, size || 'medium' }) {

도 사용가능하다.

하지만 가장 정석적인 방법은 defaultProps를 사용하는 것이다.

이제, 사이즈에 따라 다른 사이즈를 style에서 적용하는 방법을 알아본다.

//Button.scss
&:hover {
    background: lighten($blue, 10%);
  }
  &:active {
    background: darken($blue, 10%);
  }

이전 강의에서 나왔던 scss중 일부에서 &는 자기 자신을 타나내는 키워드 이다.

마찬가지로 &.medium 으로 작성하면

.Button.medium으로 변환이 될 것이다.

//Button.scss
padding-left: 1rem;
padding-right: 1rem;
&.large {
    height: 3rem;
    font-size: 1.25rem;
  }
  &.medium {
    height: 2.25rem;
    font-size: 1rem;
  }
  &.small {
    height: 1.75rem;
    font-size: 0.875rem;
  }
}

Button.scss 해당 구문을 추가시켜주고 사용을 위해 App.js에서 Button을 두개 더 렌더링해주고

function App() {
  return (
    <div className="App">
      <div classNxame="Buttons">
        <Button size="large">button</Button>
        <Button>button</Button>
        <Button size="small">button</Button>
      </div>
    </div>
  );
}

size에 lar와 small을 준다.

이제 실행시켜보면 3개의 사이즈로 생성된 버튼을 볼 수 있다.

이 버튼들 사이에 여백을 주기 위해 작업을 해 볼것이다.

Button.scss 에서

.
.
}

.Button + .Button {
  margin-left: 1rem;
}

구문을 추가해주면 .Button class를 가진 두개의 요소가 연속해서 존재하면 두번째 요소에 해당 속성을 가지게 하겠다는 의미이다. 이것을 Button클래스 내부에서 사용하면

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

이렇게 사용할 수 있다.

다양한 버튼 색상

Button에 color라는 props를 사용해서 다양한 버튼의 색상을 지정해 본다.

색상을 지정할 때에는 팔레트에서 직접 지정해줘도 되지만 https://yeun.github.io/open-color/ 라는 사이트도 유용하게 사용할 수 있다.

밝기 별로 다양하게 가져다가 사용할 수 있는 색상코드 값들이 있다.

이제 코드에서 color라는 props를 가져오기 위해 Button.js를 열어서 defaultProps를 color : 'blue'로 지정해준다.

function Button({ children, size, color }) {
  return (
    <button className={classNames("Button", size, color)}>{children}</button>
  );
}
Button.defaultProps = {
  size: "medium",
  color: "blue",
};

그 다음에는 scss 쪽에서 작업해준다.

Button.scss
$blue: #228be6; // blue라는 변수 생성해서 #228be6 색상을 넣어줬다.
$gray: #ced4da;
$pink: #f06595;

gray와 pink 변수를 선언해서 색상 값을 할당해주고.

그리고 기존에 있던

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

이 코드를

&.blue {
    background: $blue;
    &:hover {
      background: lighten($blue, 10%);
    }
    &:active {
      background: $blue;
      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%);
    }
  }

색상 변수에 맞게 변경해서 적용시켜준다.

맥에서는 blue를 드래그해서 command + d를 사용해서 여러개를 묶어 한번에 변경해 줄 수 있다.

그리고 이런식으로 반복되는 형태는

scss의 mixin 이라는것을 만들어서 관리해 줄 수 있다.

//Button.scss

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

mixin을 선언해준 뒤

@ include를 사용해서 mixin을 불러준다

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

그리고 App컴포넌트를 열어 buttons 를 가지고있는 div를 복사해서 color속성을 지정해 본다.

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="pink">
          button
        </Button>
        <Button color="pink">button</Button>
        <Button size="small" color="pink">
          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>
  );
}

그리고 buttons끼리 붙는 것을 방지하기 위해

App.scss 파일을 열어

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

.buttons 가 붙어있는 코드가 있으면 margin-top을 설정하는 코드를 작성해준다.

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

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