[CSS] styled-components의 장단점

🗣️ styled-components를 써보셨나요? 사용하면서 느낀 장단점에 대해 알려주세요.

• 의도: styled-components에 대한 경험이 있는지 확인하는 질문

• 나의 답안

  styled-components의 가장 큰 장점으로는 props를 활용할 수 있다는 점입니다.
  styled-components도 컴포넌트이기 때문에 props를 통해 동적으로 스타일을 지정할 수 있습니다.
  스타일과 로직이 결합되어 있어서, 재사용 가능한 컴포넌트를 쉽게 만들고 관리할 수 있고, 유지보수도 쉽습니다.

  다만 단점으로는 CSS-in-JS 개념이 기존 CSS 방식과 다르기 때문에, 이를 처음 접하는 개발자에게는 학습 곡선이 있을 수 있습니다.
  또한 styled-components는 런타임에서 CSS를 생성하기 때문에, 특히 많은 컴포넌트가 있을 때 성능에 영향을 미칠 수 있습니다.
  그러나 이 문제는 최신 버전에서는 상당히 개선되었습니다.
  styled-components는 CSS를 자바스크립트로 처리하므로 빌드 시 시간이 더 오래 걸릴 수 있습니다.

  저는 장점보다는 단점이 더 크다고 생각하여 styled-components 대신 tailwind CSS를 더 선호하는 편입니다.

• 주어진 답안 (모범 답안)

  제가 styled-components를 사용하면서 가장 크게 느꼈던 장점은 props를 활용할 수 있다는 점입니다.
  styled-components도 컴포넌트이기에 props를 내려줘 스타일의 동적인 변화에 사용할 수 있습니다. 또한 컴포넌트이기에 재사용이 수월합니다.

  다만 단점으로는 우선 컴포넌트 이름 짓기에 어려움이 있었습니다.
  개발자들은 이름 짓는 걸 어려워 한다더니, 이러한 스타일이 들어간 컴포넌트에도 모두 이름을 지어주는 건 너무 시간이 드는 작업이었습니다.
  또한 미미하지만 성능상 단점도 있습니다.
  그래도 본질이 JS이기 때문에 CSS로 변환하는 데에 걸리는 시간이 좀 더 길어지게 되는 특징도 있습니다.
  최근에 유행하는 Next.js의 서버 컴포넌트에서도 지원이 적다는 단점도 있습니다.

  저는 장점보다는 단점이 더 크다고 생각하여 styled-components 대신 tailwind CSS를 더 선호하는 편입니다.

---

📝 개념 정리

🌟 styled-componets의 개념

1. CSS-in-JS

   • 스타일을 별도의 CSS 파일이 아니라 JavaScript 코드 안에서 작성할 수 있다.

   • 이렇게 하면 스타일이 컴포넌트의 상태나 props에 따라 동적으로 변경될 수 있다.

2. 템플릿 리터럴

   • JavaScript의 템플릿 리터럴을 사용하여 CSS 코드를 작성한다.

   • 즉, 백틱(``)을 사용해 스타일을 정의하며, 이를 통해 동적으로 스타일을 적용할 수 있다.

3. 범위가 지정된 스타일링

   • 각각의 스타일드 컴포넌트는 고유한 클래스명을 가지며, 다른 컴포넌트와의 스타일 충돌을 피할 수 있다.

4. 테마

   • 테마를 정의하고, 앱 전체에서 일관된 스타일을 유지할 수 있도록 지원한다.

   • 이를 통해 다크 모드, 라이트 모드 등을 쉽게 구현할 수 있다.

---

🌟 styled-components 사용 예제

import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? "darkblue" : "darkgray")};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
}

export default App;

---

🌟 styled-components의 장점

1. 범위가 지정된 스타일링

   • 스타일이 해당 컴포넌트에만 적용되므로 스타일 충돌을 방지할 수 있다.

   • 전역 CSS 파일에서 흔히 발생하는 스타일 오염 문제를 해결한다.

2. 동적 스타일링

   • 자바스크립트의 기능을 사용하여 동적으로 스타일을 지정할 수 있다.

   • props, 상태, 테마 등을 활용해 조건부 스타일링이 가능하다.

3. 컴포넌트 재사용성

   • 스타일과 로직이 결합되어 있어, 재사용 가능한 컴포넌트를 쉽게 만들고 관리할 수 있다.

4. 유지보수 용이성

   • 스타일이 컴포넌트 내부에 정의되므로, 스타일과 로직이 한곳에서 관리된다.

   • 코드베이스가 커져도 유지보수가 쉬워진다.

5. 테마

   • 테마 기능을 통해 전체 애플리케이션의 일관된 스타일을 유지할 수 있다.

   • 다크 모드, 라이트 모드 등의 테마 전환이 간편해진다.

6. 자동 벤더 프리픽스

   • 자동으로 CSS 벤더 프리픽스를 추가해주므로, 스타일을 작성할 때 브라우저 호환성을 걱정할 필요가 없다.

7. CSS 관리의 단순화

   • 자바스크립트로 스타일을 관리하므로, 스타일 시트가 분리되지 않아 CSS의 의존성 관리가 더 간편해진다.

---

🌟 styled-components의 단점

1. 초기 학습 곡선

   • CSS-in-JS 개념이 기존 CSS 방식과 다르기 때문에, 이를 처음 접하는 개발자에게는 학습 곡선이 있을 수 있다.

2. 런타임 성능 이슈

   • styled-components는 런타임에서 CSS를 생성하기 때문에, 특히 많은 컴포넌트가 있을 때 성능에 영향을 미칠 수 있다.

   • 그러나 이 문제는 최신 버전에서는 상당히 개선되었다.

3. 추가적인 빌드 타임

   • CSS를 JavaScript로 처리하므로, 빌드 시 시간이 더 오래 걸릴 수 있다.

   • 또한, 스타일드 컴포넌트의 사용량이 많을수록 번들 크기가 증가할 수 있다.

4. CSS 코드 분리 어려움

   • 스타일이 자바스크립트 코드에 내장되어 있으므로, 전통적인 CSS 파일 분리와 관리 방법을 선호하는 팀에게는 불편할 수 있다.

5. 디버깅 어려움

   • 컴포넌트 이름이 고유의 클래스 이름으로 변환되므로, 브라우저의 개발자 도구에서 디버깅할 때 약간의 불편함이 있을 수 있다.

   • 이를 개선하기 위해 개발 모드에서는 더 읽기 쉬운 클래스명이 사용되지만, 여전히 어려움을 느낄 수 있다.

6. 리액트 이외의 사용 제한

   • 스타일드 컴포넌트는 주로 리액트 환경에 맞춰 설계되었기 때문에, 다른 프레임워크에서는 사용이 제한적일 수 있다.