...rest props 전달하기

component/Button.js

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

여기서 이벤트를 더 추가하게 된다면

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

이런 식으로 필요한 이벤트가 있을 때 마다 매번 이렇게 넣어주게 되는 것은 번거롭다.

이러한 문제를 해결해 줄 수 있는 문법이 바로 spread 와 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> 태그에 설정을 해준다.