[질문] styled-component로 스타일 만들 때 class를 혼합해서 사용해도 될까요?

[waterhumanB]

위에 코드 처럼 큰 틀은 styled-components로 감싸고 안에 요소들은 class로 지정해서 스타일 주곤 하는데

1주차 강의 때 멘토님이 코드 가독성, 변수 네이밍 규칙 통일 이러한 것들을 잠깐 언급 하셨는데

스타일을 styled-components로 한다면 class도 쓰지 않고 통일 시켜야 하는지 궁금합니다.

[starkoora]

@waterhumanB 쓰지 말아야 하는 건 아니지만 코드를 작성할 때는 가급적 일관성이 있는 게 좋다고 생각합니다. 개인적으로는 스타일이 들어간 요소는 스타일드 컴포넌트로 만든다 라는 정책을 가지고 있고, 외부 라이브러리의 특정 요소에 접근하는 등 셀렉터로 접근해야만 하는 경우가 아니라면 스타일드 컴포넌트로 쓰는 편입니다.

[young-st511]

저는 항상 스타일드 컴포넌트와 일반 컴포넌트가 구분이 잘 되지 않는 것이 고민이었는데 최근에는 S-dot import라는 방식을 발견하여 잘 사용하고 있습니다! 개인적으로 생각하는 스타일드 컴포넌트의 큰 장점이 CSS 네이밍이 겹치는 것에 신경쓰지 않아도 된다는 것이었는데 class-name을 사용하다보면 결국 SCSS를 쓰는 것과 비슷해져가는 것 같더라구요... import *를 사용하면 번들러 트리 셰이킹 때 미사용 코드 제거가 안 되지만 스타일드 컴포넌트는 미사용 코드가 거의 없기 때문에 괜찮다고 생각합니다!

import * as S from "./app.style.tsx"

//...생략

    return (
      <S.Container>
         <S.Button>Btn!</S.Button>
         <NormalComponent />
      </S.Container>
    )

파파고와 함께 아래 글을 참고했었습니다ㅎㅎ https://medium.com/inturn-eng/naming-styled-components-d7097950a245

[waterhumanB]

@waterhumanB 쓰지 말아야 하는 건 아니지만 코드를 작성할 때는 가급적 일관성이 있는 게 좋다고 생각합니다. 개인적으로는 스타일이 들어간 요소는 스타일드 컴포넌트로 만든다 라는 정책을 가지고 있고, 외부 라이브러리의 특정 요소에 접근하는 등 셀렉터로 접근해야만 하는 경우가 아니라면 스타일드 컴포넌트로 쓰는 편입니다.

답변 감사합니다 일관성이 중요하다가 포인트 같습니다. className으로 조건을 걸 수 있지만 styled-component 는 props로 받을 수 있으니 그걸로 사용하는게 맞는거 같네요.

[waterhumanB]

저는 항상 스타일드 컴포넌트와 일반 컴포넌트가 구분이 잘 되지 않는 것이 고민이었는데 최근에는 S-dot import라는 방식을 발견하여 잘 사용하고 있습니다! 개인적으로 생각하는 스타일드 컴포넌트의 큰 장점이 CSS 네이밍이 겹치는 것에 신경쓰지 않아도 된다는 것이었는데 class-name을 사용하다보면 결국 SCSS를 쓰는 것과 비슷해져가는 것 같더라구요... import *를 사용하면 번들러 트리 셰이킹 때 미사용 코드 제거가 안 되지만 스타일드 컴포넌트는 미사용 코드가 거의 없기 때문에 괜찮다고 생각합니다!

import * as S from "./app.style.tsx"

//...생략

    return (
      <S.Container>
         <S.Button>Btn!</S.Button>
         <NormalComponent />
      </S.Container>
    )

파파고와 함께 아래 글을 참고했었습니다ㅎㅎ https://medium.com/inturn-eng/naming-styled-components-d7097950a245

답변 감사합니다. 저도 S-dot import 방식을 사용하고 있는데 SCSS랑 비슷하게 쓰고 있는 거 같아서 고민이였습니다. ㅎㅎ 모든 스타일은 하나로 통일 하는게 좋을 것 같네요.