5. Sass : ...rest props 전달하기 - 컴포넌트 스타일링 | 벨로퍼트

...rest props 전달하기

이제 우리가 버튼 컴포넌트는 다 만들었는데요, 만약에 이 컴포넌트에 onClick 을 설정해주고 싶다면 어떻게 해야 할까요?

/src/components/Button.js :

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

만약 onMouseMove 이벤트를 관리하고 싶다면..?

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 입니다.

이 문법은 주로 배열과 객체, 함수의 파라미터, 인자를 다룰 때 사용하는데, 컴포넌트에서도 사용 할 수 있답니다.

 

Button 컴포넌트를 다음과 같이 수정해보세요.

/src/components/Button.js : 

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

이렇게 ...rest를 사용해서 우리가 지정한 props 를 제외한 값들을 rest 라는 객체에 모아주고, <button> 태그에 {...rest} 를 해주면, rest 안에 있는 객체안에 있는 값들을 모두 <button> 태그에 설정을 해준답니다.

 

그래서, 만약에 App.js 에서 사용한 가장 첫번째 버튼에 onClick 을 설정해준다면,

/src/App.js :

function App() {
  return (
    <div className="App">
      <div className="buttons">
        <Button size="large" onClick={() => console.log('클릭됐다!')}>
          BUTTON
        </Button>
        <Button>BUTTON</Button>
        <Button size="small">BUTTON</Button>
      </div>
    </div>
  )
}

버튼을 클릭 했을 때 onClick 이 잘 호출이 됩니다.

 

그래서 이렇게 컴포넌트가 어떤 props 를 받을 지 확실치는 않지만 그대로 다른 컴포넌트 또는 HTML 태그에 전달을 해주어야 하는 상황에는 이렇게 ...rest 문법을 활용하시면 됩니다!

 

 

className이 겹치지 않게 작성하는 팁

1. 컴포넌트의 이름을 고유하게 지정

   ex) UserProfile 이라는 컴포넌트는 하나만 존재하도록

2. 최상위 엘리먼트의 클래스 이름을 컴포넌트 이름과 똑같게

   ex) 대문자를 사용해서 UserProfile 로 작성

3. 그 내부에서 셀렉터 사용

UserProfile {
  .user {
    .username {}
  }  
}

 

 

---

SUMMARY

이번 튜토리얼에서는 Sass 를 활용하는 방법에 대해서 알아보았습니다. Sass 를 사용하면 스타일 파일에 다양한 유용한 문법을 사용해서 컴포넌트 스타일링 생산성을 높여줄 수 있습니다.

 

앞으로 여러분이 리액트로 프로젝트를 개발하게 될 때 한 프로젝트에서 다양한 버튼을 만들 수 있게 될 수도 있을텐데, 매번 버튼을 만들때마다 새로운 컴포넌트를 만들게 아니라 위와 같이 다양한 옵션을 넣을 수 있게 해서 그때 그때 커스터마이징 해서 사용하는 것이 효율적입니다.