React- SASS로 컴포넌트 스타일링- ...rest props 전달하기

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

...rest props 전달하기

App.js

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

function App() {
 
  return (
    <div className="App">
      <div className="buttons">
        <Button size="small" outline={true}>BUTTON</Button> {/* outline을 true로 설정*/}
        <Button color="gray" outline={true}>BUTTON</Button>
        <Button color="pink" size="large" outline={true}>BUTTON</Button>
      </div>
      <div className="buttons">
        <Button size="large" fullWidth={true}>BUTTON</Button> {/* fullWidth를 true */}
        <Button color="gray" size="large" fullWidth={true}>BUTTON</Button>
        <Button 
        color="pink" 
        size="large" 
        fullWidth={true} 
        onClick={ () => {
          console.log('클릭!');
        }}
        onMouseMove={ () => {
          console.log('마우스 무브!');
        }}
        >
          BUTTON
        </Button>
      </div>
    </div>
    
  );
}

export default App;

위 코드에서 핑크색 버튼 컴포넌트에 onClick 이벤트와 onMouseMove 이벤트를 설정해 주었는데

 

components/Button.js

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

// size: large, medium, small
// color: blue, pink, gray

function Button({ children, size, color, outline, fullWidth, ...rest }) { // ...rest를 사용하면 앞의 props를 제외한 다른 모든 것을 resst로 받아옴
    console.log(rest);
return <button className={classNames('Button', size, color, {
    outline, // 조건으로 true, false의 블리언 형태로 오기 때문에 객체 형태로 props 넣어줌
    fullWidth // 특별히 기본값을 지정할 필요는 없다. 기본값을 지정안해도 값이 undefined이기 때문에 처리가 되지 않는다.
})} 
{...rest} // button에 전달해줄 때도 ...rest로 해주면 된다. (rest 객체 안에 있는 모든 것들을 설정해주겠다는 의미)
>
    {children}
</button>; // button.scss에 size, color props 값 전달
}

Button.defaultProps = { // size props 기본값으로 medium
    size: 'medium',
    color: 'blue' // color 기본값으로 blue
};

export default Button;

매번 이벤트를 설정해줄 때 마다 일일히 props에 각각의 이벤트를 넣어주는 것은 귀찮은 일인데

...rest는 위 코드를 예로 들었을 때 children, size, color, outline, fullWidth를 제외한 모든 다른 props를 받아온다. 그러므로 아주 편리하다.

그리고 그것을 버튼에 전달해 줄 때에도 ...rest로 전달해주면 된다.

그러면 rest안에 있는 모든 props들은 버튼에 전달이 된다.

 

실행 결과

 

브라우저 콘솔 창에 잘 출력 되는 것을 볼 수 있다.