styled-components 사용한 컴포넌트의 부모 컴포넌트에서 클래스네임 추가하는 방법

스타일드컴포넌트로 감싸서 만든 자식컴포넌트에 이미 클래스네임을 지어줬을 때, 부모컴포넌트가 클래스 네임을 추가할 수 있을까? 

💡 props로 넘겨서 추가해줄 수 있다.

function RoundButton(props) {
  const leftPath =
    "왼쪽 화살표";
  const rightPath =
    "오른쪽 화살표";
  return (
    <StyledWrapper className="move-button">
      <svg viewBox="0 0 18 18">
        <path d={props.direction === "left" ? leftPath : rightPath} />
      </svg>
    </StyledWrapper>
  );
}

export default RoundButton;

const StyledWrapper = styled.button``

StyledWrapper라는 StyledComponents로 감싼 RoundButton이라는 컴포넌트에 이미 move-button이라는 클래스 이름이 있다. move-button이라는 클래스 이름은 이 컴포넌트 외부에서 RoundButton 컴포넌트의 CSS에 접근할 수 있도록 만들어 둔 것이다.

그런데 RoundButton 컴포넌트가 부모 컴포넌트에서 여러개 사용되는 일이 생겼다. 부모 컴포넌트에서 move-button 이라는 클래스이름으로 접근하는 것 뿐 만 아니라 클래스를 추가해서 각각 새로운 Style을 주어야 하는 상황이다. 클래스를 추가하지 않고도 선택자를 잘 사용하면 해결할 수 있겠지만 클래스를 추가하는 것이 직관적이라는 생각이 들어서 부모컴포넌트에서 클래스네임을 "추가"하는 방법을 찾아보았다. 일단 부모컴포넌트에서 자식 컴포넌트를 호출하면서 일반적인 방식으로 className을 넘겨주려고 하니 적용되지 않았다. 그래서 찾은 방법은 다음과 같다.

props로 className을 받아와서 기존 클래스네임 옆에 직접 추가해주는 것이다. 위 코드에서 StyledWrapper 부분을 아래 코드와 같이 수정해준다.

return (
  <StyledWrapper className={`move-button ${props.className || "no-props"}`}>
    <svg viewBox="0 0 18 18">
      <path d={props.direction === "left" ? leftPath : rightPath} />
    </svg>
  </StyledWrapper>
);

className이 따로 추가되지 않는 상황도 있을 수 있으니 그 부분도 처리해주었다.

이제 부모 컴포넌트에서 RoundButton 컴포넌트에 클래스이름을 추가할 수 있다!

 

// 부모컴포넌트 예시
<RoundButton className="new-class" direction={"right"} />

부모 컴포넌트에서 넣은 클래스네임이 기존 클래스네임 옆에 잘 추가되어있음을 확인할 수 있다.