1. Sass

출처 - 벨로퍼트

https://react.vlpt.us/styling/01-sass.html

 

SASS 참조

 

defaultProps 를 통하여 size 의 기본값을 medium 으로 설정하고, 이 값을 button 태그의 className 으로 설정하고자한다.

 

className에 CSS 클래스 이름을 동적으로 넣어주고 싶을 때 다음과 같이 설정한다. (size가 변수)

className={['Button', size].join(' ')}

또는

className={`Button ${size}`}

 

하지만, 이 방법보다 classnames 라이브러리를 사용하는 것이 훨씬 편함

⇒ 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합할 수 있음

yarn add classname

 

다음과 같이 사용

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

 

 

...rest props 전달하기

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

onClick, onMouseMove 와 같이 선언한 것을 → ...rest 로 정리

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

...rest 를 사용해서 직접 지정한 props를 제외한 값들을 rest 라는 객체에 모아주고, <button> 태그에 {...rest} 를 해주면, rest 안에 있는 객체안의 값들을 모두 <button> 태그에 설정해줌