Styled-Components를 이용한 React 컴포넌트 스타일링

'우리아이' 소개페이지를 만들며 순수 CSS → Sass → Styled-Components 로 옮겨 간 이유를 조건부 스타일링을 축으로 정리한 글이다. 각 단계에서 무엇이 남는 불편이었는지를 먼저 나열하고 그다음 도구가 그것을 어떻게 없애는지로 이어진다.

핵심 포인트

순수 CSS 의 문제는 다섯 가지로 정리된다. state 에 따라 스타일을 바인딩해야 할 때, props 와 그에 따른 조건부 스타일링이 늘 때, 거의 같은 스타일에서 일부만 바꿔 새 컴포넌트를 만들 때, 같은 스타일을 가진 다른 선택자일 때, 색상 같은 반복 키워드가 있을 때.
Sass 는 `@import` 로 여러 파일을 하나의 스타일시트로 컴파일해, 순수 CSS 의 파일별 HTTP 요청으로 인한 성능 저하를 해결한다.
그럼에도 Sass 에 남는 문제 넷: 가이드가 없으면 구조가 복잡해지고, CSS 클래스명 고민은 여전하고, 스크롤 지옥도 그대로이며, 결국 클래스로 조건부 스타일링을 한다.
근본 원인은 CSS 자체다. 변수도 루프도 함수도 없으면서 어떤 선택자든 다 받아 주는 관대함이 있다. BEM 같은 방법론이 있어도 언어 레벨의 불편은 사라지지 않는다.
Styled-Components 는 Tagged 템플릿 리터럴로 JS 파일 안에 실제 CSS 를 쓰는 CSS-in-JS 방식이며(인라인과는 다르다), 컴포넌트와 스타일 간 매핑을 없앤다.

상세 정리

예제는 Dropdown 버튼을 눌렀을 때 하단에 Link 메뉴가 나타나는 화면이며, 순수 CSS 에서는 인라인 방식과 클래스명을 활용한 조건부 스타일링 두 가지를 먼저 보인다.
Sass 의 이점으로 구조화를 꼽는다. 파일이 복잡하게 얽혀 있어도 하나로 컴파일되므로 스타일시트를 한눈에 파악하기 쉽고 협업에서도 구조를 논리적으로 전달할 수 있다.
클래스 계층을 없애는 것에 대한 반론도 짚는다. CSS 는 구조와 스타일을 분리하려는 방법이고 클래스가 그 연결고리인데, 처음에는 그걸 없애는 방식이 직관적이지 않게 느껴질 수 있다.
그에 대한 답은 분리 자체가 오히려 복잡도를 키울 수 있다는 것이며, Styled-Components 는 그 문제를 자바스크립트의 기능으로 푼다.
props 활용: 여러 CSS 클래스를 얹는 것처럼 props 로 특정 스타일을 부여하고, `&` 문자로 Sass 처럼 자기 자신을 선택할 수 있다.
전역 스타일: body 를 위해 컴포넌트를 따로 만들 필요가 없으며 font-family 같은 것을 전역으로 설정할 수 있다.
확장: 기존 컴포넌트를 확장해 새 태그를 만들 수 있다. 버튼을 앵커나 링크로 쓰고 싶을 때가 예다. 확장된 태그에 추가 스타일링도 가능하다.
애니메이션: `keyframes` 를 import 해 CSS3 와 같은 방식으로 프레임별 스타일을 정의하고, props 로 특정 값일 때만 애니메이션이 작동하게 하거나 duration 같은 속성값을 넘긴다.
`attrs` 메서드로 custom attribute 를 부여할 수 있고, 부모 컴포넌트에서 자식에게 스타일 속성을 특정해 내려줄 수도 있다.
Mixin: CSS 그룹을 뜻하며 다중 상속이 가능해 재사용 스타일을 유연하게 쓴다. 파라미터를 두면 사용하는 컴포넌트마다 값을 바꿔 스타일을 간단히 변형할 수 있다.
실용 사례로 디자이너가 모양과 색이 다른 원 10개를 요청했을 때를 든다. 순수 CSS 라면 클래스를 잔뜩 만들어야 하지만 Mixin 이면 간단하고 직관적으로 끝난다.