👨‍💻 사건

• 각 사이즈에 맞게, 버튼 스타일드 컴포넌트를 작성하고 있었다. 그러다 문득, 정말 작은 부분만 수정하는 경우가 생기면 따로 특이케이스를 생성하는게 맞는지, 아니면 오버라이딩 시켜서 단 한번만 사용하도록 할지 고민이 되었다. 만약 단 한번만 쓴다면, 오버라이딩 하여 스타일 수정하는 것이 맞다고 판단하여 한번 시도해 보았다.
• 컴포넌트 자체를 들고와서 styled-component를 따로 시키기

  function App() {
    return (
      <>
  	    <GlobalStyle />
          <ScreenPage className='hidden-scroll'>
            <h1>가져도댕냥 프로젝트</h1>
            <Button size='L'>다음</Button>
            <TestBtn size='L'>다음</TestBtn>
          </ScreenPage>
      </>
    );
  }
  // 스타일 오버라이딩 기법
  const TestBtn = styled(Button)`
    && {
      /* height: 200rem; */
      margin-top: 400px;
    }
  `;

  • 위와 같이 하면, 스타일이 먹히지 않는다.

✅ 해결

• 일단 styled-component 는 componentStyle.rules 에 스타일이 지정이 되어, 먹이는 형식이다.
  이 적용된 스타일은, styled 컴포넌트로 통해 생성된 2개의 클래스 중 후자의 클래스에 적용이된다.
  그러나, className 이 선언이 되지 않는다면, Button 에 스타일을 먹이면 추가로 className 이 생성되지 않는다. 그럼 과연 className 을 선언하고 props로 전달받으면 어떨까 하여 시도해보았다.

function App(**{className}**) {
  return (
    <>
	    <GlobalStyle />
        <ScreenPage className='hidden-scroll'>
          <h1>가져도댕냥 프로젝트</h1>
          <Button size='L'>다음</Button>
          <TestBtn **className={className}** size='L'>다음</TestBtn>
        </ScreenPage>
    </>
  );
}
// 스타일 오버라이딩 기법
const TestBtn = styled(Button)`
  && {
    /* height: 200rem; */
    margin-top: 400px;
  }
`;

const Button = ({ children, size, **className** }) => {
  return (
    <StyledButton **className={className}** size={size}>
      {children}
    </StyledButton>
  );
};

이런 형태로, className 을 선언을 해두니, styled-component 에서 생성한 스타일이 들어있는 클래스가 들어갔다. 나의 추측으로는, 클래스 컴포넌트를 설정을 하면 className 이 임의로 설정이 되지만, 이에 또 className 을 추가로 지정하는 경우에는 경로를 미리 열어두어야 먹히는 듯한 느낌이였다.

→ styled-component 의 className 이 오버라이딩하여 추가를 위해서는, 먼저 className 을 지정해두어야한다. ( 경로를 미리 설정해 두는 형식이다. )

💭 개선

{…rest} 를 통하여, 지정한 props 제외한 나머지 로 내려오는 값들을 다 따로 저장을 해둔다면, 앞서 했던 className 을 따로 안받아도 된다. 스타일드컴포넌트가 먹인 클래스들이 …rest 에 들어가 설정이 되기때문이다. (경로 설정을 해둔 느낌)

const Button = ({ children, size, **...rest** }) => {
  return (
    <StyledButton size={size} **{...rest}**>
      {children}
    </StyledButton>
  );
};