Sass

sass에서는 .scss/.sass 두 확장자를 지원하는데, 
각 확장자의 문법이 다르다. 보통 scss 문법이 더 많이 사용된다고 함!
이게 좀 더 자스 객체st

시작하기 node-sass 라는 라이브러리를 설치한다. npm i node-sass
sass -> css로 변환해주는 역할을 함

classnames 라는 라이브러리는 조건부 스타일링을 할 때,
함수 인자에 문자열/배열/객체 등을 손쉽게 조합하여 문자열로 만들 수 있게 해줌 
npm i classnames

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'

// 동시에 여러개의 타입으로 받아올 수 도 있습니다.
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// false, null, 0, undefined 는 무시됩니다.
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

 

props를 받아오고 그 값에 대한 기본값을 설정함.

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

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

 

@mixin @include

는 scss계의 함수같은 느낌,, 반복되는 코드를 줄여준다!

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

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

 

outline

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

props로 받아온 outline을 객체 안에 집어 넣고 classNames()에 포함시켰는데,
이 코드의 의미는 outline 값이 true일 때만 button에 outline css 클래스가 적용된다는 의미.

// App.js
<div className="buttons">
        <Button size="large" color="blue" outline>
          Button
        </Button>
        <Button color="gray" outline>
          Button
        </Button>
        <Button size="small" color="pink" outline>
          Button
        </Button>
      </div>

 

...rest props 전달하기

버튼 태그에 클릭이벤트를 넣고 싶음.
근데 일일이 onClick={onClick} 이런 게 번거롭고 귀찮을 때,

function Button({ children, size, color, outline, fullWidth, ...rest }) {
  return (
    <button
      className={classNames('Button', size, color, { outline, fullWidth })}
      {...rest}
    >

이렇게 {...rest} 를 사용하면 지정한 props를 제외한 값들을 rest 라는 객체에 모아줌!!
이걸 원하는 버튼 태그에 입력해주면, rest 라는 객체안에 있는 값들을 모두 버튼 태그에 설정해줌!