CSS-in-JS Library | styled-components란? ( + 직접 사용해본 후 느낀점 )

styled-components란?

[ index ]

1. styled-components란?

2. styled-components의 장점과 단점

3. 왜 styled-components를 사용해야 할까?

4. styled-components를 직접 사용해보며 느낀 장점과 단점

5. 결론

 

---

1. styled-components란?

https://styled-components.com/docs

styled-components: Documentation

styled-components is the result of wondering how we could enhance CSS for styling React component systems.
- 공식문서 발췌 -

 

Styled Components는 React 애플리케이션에서 CSS 스타일을 구성하는 데 사용되는 JavaScript 라이브러리 중 하나입니다.  CSS-in-JS(JavaScript 안에서 CSS를 작성하는) 패턴의 한 예로, 컴포넌트와 관련된 스타일을 동적으로 생성하고 관리하는 데 도움을 줍니다.

 

가장 인기 있는 CSS-in-JS 라이브러리 중 하나로, JavaScript를 사용하여 스타일을 작성할 수 있고, 컴포넌트 기반 스타일링을 제공합니다.

 

참고로 그 외  CSS-in-JS 라이브러리로는 대표적으로 아래의 2가지가 있습니다.

Emotion: 강력한 CSS-in-JS 라이브러리로, CSS-in-JS 생태계에서 많이 사용되는 라이브러리 중 하나입니다.
Styled JSX: JSX 문법을 사용하여 컴포넌트 내부에 스타일을 작성하는 방식입니다.

 

2. styled coponents 장점과 단점

장점

1. Automatic critical CSS

스타일 구성 요소는 페이지에 렌더링되는 구성 요소를 추적하고 해당 스타일만 주입하며 다른 것은 자동으로 적용되지 않는다. 코드 분할과 결합하면 사용자가 필요한 최소한의 코드만 로드할 수 있습니다.

 

2. No class name bugs

자동으로 전역에 걸쳐 유니크한 className을 생성해준다. 중복될 우려나 불필요하게 스타일이 복제될 걱정이 없다. 또한 스타일을 적용할 때 오탈자 걱정 또한 하지 않아도 된다.

 

3. Easier deletion of CSS

해당하는 코드의 스타일이 어디에 작성되어있는지 명확하게 알 수 있다. 모든 스타일은 각각의 컴포넌트와 묶여있기 때문에 불필요한 컴포넌트를 삭제함으로써 해당 스타일까지 한번에 쉽게 제거가 가능하다.

 

4.  Simple dynamic styling

classes를 수동으로 관리할 필요없이 props 또는 global theme을 사용하여 스타일 적용 및 관리가 할 수 있다. 훨씬 간단하고 직관적이다.

 

5. Painless maintenance

각각의 다른 파일에서 특정 컴포넌트에 영향을 주는 것에 대한 걱정을 하지 않아도 된다. 따라서 아무리 프로젝트의 규모가 커져도 유지 보수가 용이하다.

 

6. Automatic vendor prefixing

CSS를 현재 표준에 맞게 작성하면 styled-components가 나머지를 처리해준다.

 

7. Allows Type Checking

styled-components는 TypeScript 또한 지원하며, 개발자가 실수를 더 빨리 알아차릴 수 있도록 type-checking을 지원합니다.

 

8. Styled-Components Offers React Native Mobile Support

styled-components는 React와 React Native를 모두 지원합니다. 또한 웹과 에플리케이션 모두 유사한 UI를 더 쉽게 구현할 수 있습니다. 이를 통해 더 원활한 사용자 경험을 제공할 수 있습니다.

 

9. Supports Server Side Rendering

styled-components를 사용해  스타일시트의 서버사이드 랜더링이 가능합니다.이를 통해 더 빠르게 페이지를 로드할 수 있어 사용자 경험을 향상시킬 수 있습니다.  또한 SEO 검색 엔진 최적화에도 효과적입니다.

https://styled-components.com/docs/advanced#server-side-rendering

styled-components: Advanced Usage

 

단점

1. It's not framework independent

CSS를 JS내에서 작성하는 것은 추후 두가지를 분리하기 어려워 유지보수에 어려움을 야기할 수 있습니다. 만약 JavaScript Framework를 변경할 경우, 대부분의 코드를 다시 작성해야 하는 상황이 발생할 수 있습니다. 이는 상당한 추가 비용과 시간을 발생시킵니다. 이런 상황을 대비하여 CSS module을 사용하거나, emotion과 같은 framework independent library를 사용하는 것이 더 나은 선택이 될 수 있습니다.

 

2. It can be hard to read

styled-components 와 React components를 구분하기가 어렵습니다. (특히 atomic design system 밖에서 )

어떤 component가 비지니스 로직을 포함한  component인지 구분하기 하기 위해서는 props를 확인해야만 합니다. 게다가 component의 이름이 header나 list item과 같은 형식으로 되어있느 경우 , 명확하게 알아보기 어려울 수 있습니다.  이를 해결하기위해 styled 코드를 분리하여 작성하고 import하는 방법도 있으나 이것또한 완전한 해결방법은 아닙니다. 

 

3. Styled components are compiled at runtime

styled-components  JavaScript 라이브러리이기 때문에 브라우저가 CSS를 다운로드하고 JavaScript를 이용해 파싱하게 됩니다. 즉 JavaScript가 모두 다운로드 된 후에야 화면이 그려진다는 것입니다. 이러한 과정은 초기 로드 과정에서 많은 양의 JavaScript를 다운로드해야만 하기 때문에 퍼포먼스 이슈를 야기할 수 있습니다. (Static CSS의 경우가 속도는 훨씬 빠릅니다. ) 또한 사용자 경험의 시점에서 보았을 때도 좋지 않을 수 있습니다. 

 

4. Extra build tools are required

Babel plugin, Babel Macros, TypeScript Plugin, Stylelint과 같은 추가적인 plugin이 필요할 수 있습니다.

 

5. Mixing CSS modules and global CSS classes is cumbersome

component를 기반으로 하지 않는 global styling(header, body, HTML)는 style-components를 단독으로 사용하지 않고 CSS  Modules을 함께 사용해야하는 경우가 발생합니다. 이러한 경우 큰 규모의 애플리케이션에서 사용이 어려울 수 있습니다. 이렇게 섞어서 사용하게 될 경우 코드가 복잡해지고 결과적으로 개발과정에 어려움을 줄 수 있습니다.  

 

3. 왜 styled-components를 사용해야 할까?

위에서 이미 styled coponents의 기능에 대해 언급하는 것만 보아도   styled coponents의 장점을 충분히 알 수 있습니다. 그럼에도 굳이 왜냐고 물으신다면 아래의 글을 인용하여 그 이유를 다시 한번 정리해보겠습니다. 아래의  글은  styled-components 공식 블로그에 올라온 글입니다. 

https://medium.com/styled-components/why-styled-components-2deeed757cfa

Why styled-components? 💅

 

1. 쉽고 간단한 사용방법

특정 구문을 권장하거나 강요하지 않습니다.  styled-components는 컴포넌트별로 분리된 CSS를 가능한 쉽게 작성하고 관리할 수 있도록 지원합니다.

 

2. 개발자 경험에 중점을 둔 스타일 라이브러리

다운로드하고 소비해야 할 수많은 패키지 대신 모든 핵심 라이브러리와 가장 인기 있는 기능을 기본 가져오기에서 바로 사용할 수 있습니다 . 따라서 더 쉽게 리팩토링이 가능하며, 학습하는데 용이합니다. 결론적으로 개발 생산성 향상에 도움이 됩니다. 

 

3. 지속적인 업데이트를 통한 성능향상과 안정성 보장

styled-components팀은 지속적인 release와 함께 라이브러리를 가능한 더 빠르게, 하지만 용량은 더 작게 만들기 위해 지속적으로 밴치마킹과 분석에 투자하고 있습니다. (최근까지도 지속적으로 업데이트가 이루어지고 있습니다.)

 

4. 변경사항에 대해 신중히 검토하여 사용자의 개발에 끼치는 악영향을 최소화

API와 API 사용 방법에 대해 극도로 의식하고 있으며 두 가지 모두에 적합한 올바른 솔루션이라고 확신할 때까지 변경 사항을 도입하는 데 극도로 주의하고 있습니다 . 그리고 일반 사용자. 즉, 스타일 구성 요소를 사용하여 코드를 작성할 때 계속 작동 상태를 유지하고, 라이브러리가 발전함에 따라 최소한의 리팩토링만 필요하다는 확신을 가질 수 있습니다.

어떤 이유로든 무언가를 변경하는 경우 개발 시간 경고를 통해 충분한 알림을 추가하고 가능할 때마다 자동화된 "codemods"를 제공하여 리팩토링을 최대한 쉽게 만들어 줍니다. 

 

5. 강력한 커뮤니티 형성

styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리입니다. 그만큼 이슈에 대한 다양한 자료들을 쉽게 찾아볼 수 있어 개발을 하는 과정에서 이슈 핸들링을 더 쉽고 빠르게 할 수 있습니다. 

 

Weekly Downloads : 6,209,700 (2023.05 기준) → 6,762,395( 2023.11 기준 업데이트 )
Downloads (Last 7 Days) : 3,268,996 (5.3.11 ver) → 288,473 (6.1.1 ver)
over 39.7k stars on GitHub ( 2023.11 기준 업데이트 )

 

 

 

4. styled-components를 직접 사용해보며 느낀 장점과 단점

장점

1. No class name bugs

className을 일일이 작성하지 않아도 되고 중복될 우려가 없다는 점이 정말 편리했습니다.

지난 프로젝트에서는 컨벤션으로 className의 규칙을 정해 개발을 진행했었습니다. 하지만 그렇게 정해도 예상치 못한 예외들이 발생했고, merge를 하다보면 className이 ruqcutj style이 잘못 적용되거나 충돌하는 문제가 발생했습니다. 그때의 경험을 생각했을 때 확실히 styled-components를 사용하면 협업에 도움이되었습니다.

 

2.  Global theme

global theme을 활용하여 직관적인 스타일 적용이 가능하고 이로 인해 협업이 훨씬 수월했습니다. 이전에 프로젝트에서 사용했던 Sass에서 유용하게 사용했던 Variables 기능을 유사한 형태로 사용할 수 있어 좋았습니다.  자주 사용하는 색상이나 폰트 사이즈등을 지정해두면 해당 keyword로 코드를 작성하기만하면 되니 코드 작성이 쉬워지고 직관적이라는 느낌을 받았습니다. 또한 자주 사용하는 값들을 매번 직접 작성하다보면 오타로 인해 오류가 발생하기도 하는데 이러한 문제도 해결이 가능해서 유용하게 사용했습니다. theme파일에서 바로 import 할 수 있어 적용도 편리했습니다. 

 

3. Nesting 

sass 와 마찬가지로 nesting 기능을 지원하여 &을 사용한 스타일링이 가능했습니다. 아무래도 이전에 사용해본 경험이 있는 Sass에서 지원하는 Variables,  mixins등의 기능을 styled-components에서도 사용이 가능하다는 점이 장점이라고 느껴졌습니다.

 

4. Painless maintenance

컴포넌트를 나눠서 관리할 때 각각의 스타일 파일도 따로 관리해야하는 번거로움이 있었는데  styled-components 를 사용해서 한 파일에서 컴포넌트와 컴포넌트 스타일을 같이 관리할 수 있어 편리했습니다. 컴포넌트를 나눠서 파일로 관리할 경우 스타일 파일을 따로 관리해야하는 부담이 줄어든 점이 좋았습니다. 그러나 이부분은 앞서  styled-components 의 장단점에서 언급한 바와 같이 어떤 관점에서 보느냐에 따라 유지보수 측면에서 장점이 될수도 단점이 될 수도 있다고 생각합니다. 

 

5. Simple dynamic styling

자바스크립트 문법을 활용해 동적 스타일링이 용이하다는 점이 큰 장점이라고 생각합니다. props로 값을 넘겨주어 조건부 스타일링이 되기 때문에 더 쉽게 UI를 구현할 수 있었습니다. 저는 특히 반응형 작업을 진행할 때 이미지의 border속성을 다르게 주거나 특정 조건에서만 글자의 색상을 변경하는 등의 스타일 변화를 줄 떄 유용하다고 느꼈습니다. 그리고 JavaScript 문법을 사용하기 때문에 삼항 연산자뿐만아니라  switch문을 활용한 보다 복잡한 동적 스타일링이 가능하다는 점도 매력적이었습니다. 

 

 

 

단점

1. It can be hard to read

스타일까지 하나의 파일로 관리하다보니 컴포넌트의 규모가 커지면 그만큼 파일 하나의 내용이 많아져서 한눈에 파악하기가 어려웠습니다. 이와 이어지는 문제점으로 스타일을 적용하려고 할 때마다 계속 스크롤을 위아래로 왔다가 갔다하며 작성하는 것이 번거롭게 느껴졌습니다. 코드가 길어질 수록 스타일 적용하고 수정하는 과정에서 이러한 단점이 두드러졌습니다.

style을 적용하기 위해 컴포넌트로 코드를 작성하다보니 시멘틱한 코드와는 다소 거리감이 있어 코드가 직관적이지 않다는 점 또한 단점이었습니다. 작성한 당사자가 아니라면 쉽게 코드를 보고 어떤 구조로 되어있는지 파악하기 어렵다는 점이 단점이었는데, 이부분은 코드 리팩토링을 하는 과정에서 특히 어려움을 야기했습니다. 그리고 이러한 경우 그냥 coponent와 styled component를 구분하기 어려워서 헷갈리는 경우 있었고 그때마다 props와 작성한 style을 계속 확인해야하는 번거로움이 있었습니다.

 

2. Mixing CSS modules 

프로젝트에서 외부 API를 사용해야 하는 경우,적용을 위해 구조적인 부분부터 다시 작성해야하는 어려움이 있었습니다. 기존의 방식으로는 구현이 어려워 새롭게 작성해야하는데 공식문서를 참고 할 수 없어 거의 독학으로 직접 확인해가며 작업해야 한다는 점이 어려웠습니다. 그리고 외부 라이브러리를 사용하는 경우에도 기존에 라이브러리에서 제공하는 css파일과 병행하여 사용해야 한다는 점 또한 코드 복잡도가 증가한다는 단점이 있었습니다. 

 

5. 결론

 

전반적으로 단점보다는 장점이 많은 라이브러리라는 생각이 듭니다. 실제로 사용해보면서 편리하다는 생각을 많이 했습니다.

단기간에 프로젝트에 적용할 수 있었던 것도 기존의 CSS에서 사용하던 기능들을 거의 유사하게 사용할 수 있어 공식문서를 참고하면 비교적 쉽게 사용이 가능했기 때문이라 메리트가 있다고 생각합니다.  그리고 라이브러리 커뮤니티가 활성화 되어있어 다양한 정보들을 쉽게 얻을 수 있고, 지속적으로 업데이트가 이루어지고 있다는 점도 매력적입니다.

 

단점들의 경우 지속적으로 프로젝트의 프레임워크 변화 또는 유지보수를 위한 구조적 변화가 크지 않다면 부각되지 않을 단점이라는 생각이 듭니다. 다만 유지 보수 측면에서 코드 가독성이 떨어진다는 점만큼은 인정합니다. 실제로 팀 프로젝트 종료 후 배포와 코드 리팩토링을 진행하는 과정에서 다른 팀원의 코드를 수정해야 할 때 코드를 알아보기 어려워 꽤 고생했던 기억이 있습니다. 서술적으로 작성된 component 이름들을 해석하고 styled componenet와 구분하는 과정이 꽤 시간 소요가 많이 되어 이 부분은 컨벤션을 정해 component 이름을 좀 더 명확히 해두면 보완할 수 있는 단점이라고 생각합니다.

 

그리고 JavaScript를 기반으로 하기 때문에 검색엔진 최적화와 초기 로드 시간이 오래 걸린다는 단점의 경우 syled- components가 서버 사이드 렌더링을 지원한다는 점에서 보완이 가능하다고 생각합니다.

 

styled-copmponents가 현재 JavaScript 기반 CSS 라이브러리 중 가장  인기가 많기는 하지만 그렇다고 무조건 사용하기 보다는 프로젝트의 특성과 장기적인 플랜에 맞춰 선택하는 것이 현명할 것 입니다.  개인적인 생각으로는 규모가 크지 않은 프로젝트거나, 유지보수 측면에서 큰 확장이나 변동이 없을 것으로 판단되는 경우, 충분히 사용해볼 가치가 있는 라이브러리라고 생각합니다.  

   

 

 

---

참고 문헌

The Pros and Cons of Using Styled Components in React

The Pros and Cons of Using Styled Components in React

Pros and Cons of Using Styled Components in React - DZone

Pros And Cons Of Using Styled Components In React