React - scss연동, ...rest props

watching하여 css파일을 별도로 만들지 않고, react의 scss를 실행해보자

sass 설치

터미널 명령

yarn add sass

App.jsx

import React from 'react';
import "./App.scss";
import Button from "./components/Button"

function App() {
  return (
    <>
      <div className="App">
        <Button>파란버튼</Button>
      </div>
    </>
  );
}

export default App;

App.scss

.App{
    max-width: 700px;
	margin: 50px auto;
	border: 2px solid gray;
	padding: 2rem;
}

Button.jsx

import React from 'react'
import "./Button.scss"


const Button = ({children}) => {
  return (
    <button className="Button">{children}</button>
  )
}

export default Button

Button.scss

$blue: #228be6;

.Button {
	background: $blue;
	color: white;
	font-weight: bold;
	border: 0;
	outline: none;
	border-radius: 4px;
	padding: 1rem 2rem;
	cursor: pointer;

	&:hover {
		background: lighten($blue, 20%);
		//lighten함수 사용, 색상 10%밝게
	}

	&:active {
		background: darken($blue, 20%);
	}
}

classnames 라이브러리 설치

yarn add classnames

특정 값이 true/false임에 따라 클래스명을 추가하거나, 추가하지 않을 수 있다.

key(class명) : value형태로 value가 true 혹은 false로 평가됨에 따라 스타일을 적용하거나 적용하지 않을 수 있음.

App.jsx

import React from 'react';
import "./App.scss";
import Button from "./components/Button"

function App() {
  return (
    <>
      <div className="App">
        <Button size = "large">파란버튼</Button>
        <Button>파란버튼</Button>
        <Button size = "smaill">파란버튼</Button>
      </div>
    </>
  );
}
export default App;

Button.jsx

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

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

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

export default Button

import classNames from 'classnames'// 설치한 classNames라이브러리 불러옴.

"Button"클래스는 조건없이 기본으로 추가.

"size"클래스는 값이 true인 경우에만 추가.

defaultProps

props를 따로 지정해주지 안항도 기본값으로 전달 해주는 props
컴포넌트명.defulatProps={}

Button.scss

$blue: #228be6;

.Button {
	background: $blue;
	color: white;
	font-weight: bold;
	border: 0;
	outline: none;
	border-radius: 4px;
	padding: 1rem 2rem;
	cursor: pointer;

	&:hover {
		background: lighten($blue, 20%);
	}

	&:active {
		background: darken($blue, 20%);
	}
	&.large {
		width: 200px;
		height: 70px;
		font-size: 1.3rem;
	}
	&.medium {
		width: 100px;
		height: 40px;
		font-size: 1rem;
	}
	&.small {
		width: 70px;
		height: 30px;
		font-size: 0.7rem;
	}
	& + & {
		margin-left: 1rem;
	}
}

& + & // .Button + .Button과 같음. 자매관계 태그중 바로 옆 태그를 선택하라.

...rest props

전달해야 하는 props가 너무 많을때..

App.jsx

...
<div className="BtnWrap">
				<Button color="pink" size="large" outline fullWidth>
					버튼
				</Button>
				<Button color="lime" size="large" fullWidth>
					버튼
				</Button>
				<Button 
        color="blue" 
        size="large" 
        fullWidth
        onClick={()=>{
          console.log("클릭!");
        }}
        onMouseMove={()=>{
          console.log("마우스가 움직임");
        }}>
					버튼
				</Button>
			</div>

Button.jsx

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

출처 :
[React] 리액트 classnames 활용하기 (classnames, !! 연산자)
[React] defaultProps 사용하기