프론트엔드 Styled‐Components 선정 이유
styled-components 의 가장 큰 장점은 JavaScript 코드 내부에서 CSS 스타일링을 제공할 수 있다는 점입니다. 이는 스타일과 컴포넌트 로직을 가까이 두어 개발 프로세스를 단순화하고 유지보수를 용이하게 합니다. 또한 스타일 자체를 전역으로 관리하지 않아도 되며, 컴포넌트 기반 개발방식으로 쉽게 스타일링을 할 수 있습니다.
styled-components는 props를 통해 동적으로 스타일을 조정이 가능합니다. 이러한 기능은 다른 스타일링 방법들과 비교했을 때 뛰어난 장점으로 여겨진다. css module의 경우 동적으로 스타일 조정을 해야할 때 class 이름을 두어야하지만, styled-components의 경우는 props를 통해 특정 속성만 변경할 수 있다는 점에서 큰 이점을 느꼈습니다.
공통적인 스타일 특성을 가진 컴포넌트들을 기본 컴포넌트로 정의하고, 이를 기반으로 다양한 변형을 가진 새로운 컴포넌트들을 쉽게 확장할 수 있습니다. 예를 들어, 특정 버튼 스타일을 기본으로 한 다양한 버전의 버튼들을 간결하게 생성할 수 있습니다. 코드의 중복성을 크게 줄이고, 디자인의 일관성을 유지하면서도 유연하게 다양한 스타일 변형 및 확장할 수 있습니다.
전 세계적으로 Styled-Components는 2020년 이후 CSS-in-JS 기준 50%정도를 계속 유지하고 있습니다. 그만큼 커뮤니티도 많이 형성되어 있고, 사용에 있어서 참고 자료를 찾기에 용이하다고 느꼈습니다. 뿐만 아니라 우아한 테크 코스 내에서도 Styled-Components 를 사용해본 경험이 있는 크루가 많기 때문에, 서로 정보를 공유하는 데에 있어서 큰 이점이 있다고 생각했습니다.