이번에는 react에서 element에 style을 적용하는 방법 중 하나를 공부해볼 것이다.😎

component에 className style 적용해보기

<style>
      .button {
        font-size: 16px;
        display: inline-block;
        margin: 4px 2px;
        padding: 15px 32px;
        border: none;
        background-color: green;
        color: white;
      }

      .red {
        background-color: #f44336;
      }
</style>

<ButtonBox className="red">Red</ButtonBox>

배경색상만 props로 전달받아 설정 component가 있다고 생각하자 어떻게
ButtonBox component는 props를 받으면 될까?

✔️1. props로 전달받기

첫번째 방법은 props로 넘어온 데이터를 참조해 설정해주는 방법이다.

 	const ButtonBox = (props) => {
        console.log("props.children", props);
        return (
          <button className={`button ${props.className}`}>
            {props.children}
          </button>
        );
      };

이 코드를 더 간단히 표현하자면 구조분해 할당으로 이렇게 표현할 수 있다.

      const ButtonBox = ({ className, style, children }) => {
        return <button className={`button ${className}`} >{children}</button>;
      };

✔️2. rest 이용하기

📌 rest

• {...rest} 문법은 지정한 props를 제외한 값들.
• (어떤 props를 받을지 모르지만 그대로 다른 component에 전달할때 사용한다.

     const ButtonBox = ({ className, style, ...rest }) => {
       console.log("what is rest? ", rest);
       return <button className={`button ${className}`} {...rest}></button>;
     };

어떤값이 넘어올지 모르는 경우 rest사용하기

     const Button = ({ ...rest }) => {
       return <buttonn className={"button"} {...rest} />;
     };

만약 rest의 할당을 className보다 앞에 하면 어떻게될까? 이런식으로 말이다.

      const Button = ({ ...rest }) => {
        return <buttonn  {...rest} className={"button"} />;
      };

위의 예제를 토대로 보면 뒤에선언된 class로 덮어써지기때문에 red색상이 아닌 button class의 기본색상인 초록색으로 덮어써질 것이다.