스타일-컴포넌트 5분 간단 소개

원문 바로가기: A 5-minute Intro to Styled Components By Sacha Greif, Jan 23 2017

스타일-컴포넌트 5분 간단 소개

CSS는 이상합니다. 기본적인 내용은 15분이면 다 배울 수 있지만, 효율적인 작성법을 익히려면 시간이 많이 걸립니다.

그 원인 중 하나는 언어 자체에 있습니다. CSS가 제공하는 기능은 꽤 제한적입니다. 변수도 없고, 루프문과 함수 사용이 불가능합니다. 그러면서 또 상당히 관대한 면도 있어서 개발자가 요소를 쓰던, 클래스나 ID를 쓰던, 아니면 그 어떤 선택자를 쓰던 다 받아줍니다.

스타일시트 아비규환

아마 이미 경험 해보셨을 테지만, CSS를 사용하면 종종 혼란으로 향하는 급행열차에 탄 것과 같은 기분을 느낄 수 있습니다. SASS나 LESS가 여러 유용한 기능을 제공하기는 하나 그다지 많은 도움은 되지 않습니다.

BEM과 같은 방법론으로 CSS를 정리해 볼 수 있습니다. 유용하기는 하지만 순전히 개발자의 선택에 따라 사용여부가 갈리고, 언어나 툴 차원에서 강제로 적용하도록 할 수가 없습니다.

CSS의 새로운 흐름

몇 년 전으로 거슬러 올라가보면, 이런 문제를 해결해 보기 위해 아예 CSS의 새로운 작성 방법을 고안해 낸 자바스크립트 기반 툴 사용 바람이 분 적이 있습니다.

스타일-컴포넌트는 이 때 등장한 라이브러리 중 하나 입니다. 혁신성과 친숙함을 둘 다 겸비했기 때문에 세간의 주목을 빠르게 받았습니다. 리액트를 사용해 본 적이 있다면 (만약 사용해 본 적이 없다면, 제가 쓴 ‘자바스크립트 공부 계획’과 ‘리액트 소개글’을 참고해 주세요), 스타일-컴포넌트는 알아두는 편이 좋습니다.

최근에 제 개인 홈페이지를 새로 리뉴얼 하면서 스타일-컴포넌트를 사용해 보았는데, 오늘 이 글을 통해 리뉴얼 과정에서 배우게 된 몇가지 사항들을 공유하고자 합니다.

컴포넌트긴 한데, 스타일을 입혔습니다

스타일-컴포넌트에서 가장 중요한 것은 이것의 명칭을 제대로 이해하는 것입니다. 더 이상 HTML 요소에 스타일 입힐 필요도, 클래스명과 HTML 요소를 기반으로 컴포넌트를 만들 필요도 없습니다.

<h1 className="title">Hello World</h1> h1.title{   font-size: 1.5em;   color: purple; } 

이 대신에 해야 하는 일은 스타일에 관한 정보를 캡슐화하여 지니고 있는 스타일-컴포넌트를 정의하는 것입니다. 이렇게 정의한 컴포넌트는 코드에서 얼마든지 자유롭게 사용할 수 있습니다.

import styled from 'styled-components'; const Title = styled.h1`   font-size: 1.5em;   color: purple; `; <Title>Hello World</Title> 

그다지 차이가 없는 것 처럼 보일 수도 있는데, 실제로도 두 작성 방식에서 사용한 문법은 굉장히 비슷합니다. 그러나 중요한 차이점은 스타일이 이제 컴포넌트의 ‘일부’가 되었는지, 안되었는지 여부입니다.

다르게 말하자면, 컴포넌트와 스타일의 연결고리인 CSS 클래스를 걷어낸 것이 바로 스타일-컴포넌트 입니다.

스타일-컴포넌트 개발에 참여한 Max Stoiber는 이런 말을 했습니다.

“스타일-컴포넌트의 기본 이념은 스타일과 컴포넌트 사이의 연결(mapping)을 제거함으로써 모범적인 개발 방식을 준수하고자 하는 것 입니다.”

복잡성 덜어내기

스타일을 주관하는 HTML 요소(<font> 태그 기억 나시나요?) 대신에 CSS를 사용하게 된 이유가 구조와 스타일을 분리하기 위해서이고, 연결 고리 역할을 하는 클래스 계층은 이런 목적으로 도입된 것인데, 클래스를 없애 버린다고 말하니까 스타일-컴포넌트를 처음 접해보는 입장에서는 그닥 직관적인 방법이 아니라고 생각 할 수도 있습니다.

그렇지만 스타일과 구조의 분리로 인해 복잡도가 엄청나게 증가할 수도 있으며, 이러한 복잡도는 CSS보다는 자바스크립트와 같은 "진짜" 프로그래밍 언어로 더 손쉽게 다스릴 수 있다고도 생각해 볼 수 있습니다.

클래스 보다는 속성(Prop)

클래스를 사용하지 않겠다는 신념을 지키기 위해, 스타일-컴포넌트에서는 컴포넌트를 커스터마이징 하는 데 클래스 대신 속성을 사용합니다. 그러므로 다음 예시와 같은 코드 대신에,

<h1 className="title primary">Hello World</h1> // 파란색으로 나옵니다. h1.title{   font-size: 1.5em;   color: purple;      &.primary{     color: blue;   } } 

다음과 같은 코드를 작성합니다.

const Title = styled.h1`   font-size: 1.5em;   color: $; `; <Title primary>Hello World</Title> // 파란색으로 나옵니다. 

보시다시피 스타일-컴포넌트를 사용하면 CSS와 HTML과 관련된 세부 코드를 리액트 컴포넌트에서 따로 빼낼 수 있기 때문에 코드를 깔끔하게 정리할 수 있습니다.

이 말은 곧 스타일-컴포넌트를 사용하여 작성한 CSS가 여전히 CSS 코드라는 말입니다. 그렇기 때문에 다음과 같이 작성하여도 (관습적인 작성 방법과는 살짝 거리가 있으나) 완벽하게 유효한 코드입니다.

const Title = styled.h1`   font-size: 1.5em;   color: purple;      &.primary{     color: blue;   } `; <Title className="primary">Hello World</Title> // 파란색으로 나옵니다. 

CSS를 곧이 곧대로 넣어도 되므로, 이러한 특징은 스타일-컴포넌트 학습 장벽을 상당히 낮추는 데 일조합니다. 사용하다 미심쩍은 점이 있다면 언제든지 원래 사용하던 작성법으로 돌아갈 수 있습니다!

주의할 점

스타일-컴포넌트는 시작된지 얼마 안된 프로젝트이므로 몇가지 기능이 아직 완벽하게 지원이 안된다는 점을 꼭 언급하고 넘어가야겠습니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트에 스타일을 입히고 싶다면, 지금은 CSS 클래스를 사용하는 수 밖에 없습니다. (스타일-컴포넌트 버전 2가 나오지 않는 이상 말입니다.)

또한 스타일을 일일히 주입하여 서버 단에서 CSS를 미리 렌더링 하는 것은 가능하나, 아직까지 이를 위한 "공식적인" 방법은 만들어 두지 않았습니다.

스타일-컴포넌트는 클래스명을 랜덤으로 생성하므로 이로 인해 브라우저 개발자 도구를 통해 스타일이 정의된 부분을 찾는 것 역시 까다로울 수 있습니다.

그러나 스타일-컴포넌트 프로젝트 핵심 개발팀은 이런 종류의 이슈를 전부 신경쓰고 있으며, 하나 하나 열심히 고쳐 나가고 있다는 점에서 희망을 가져볼 수 있습니다. 버전 2가 곧 나올 예정이어서 매우 기대가 됩니다!

더 알아보기

이 글은 스타일-컴포넌트의 구현 원리에 대해 자세하게 설명하려고 쓴 것이 아니라, 여러분에게 프로젝트에 대해 맛보기로 살짝 알아보는 기회를 제공함으로써 더 살펴볼 만한 가치가 있을지 없을지 선택하는 데 도움을 주고자 쓴 것 입니다.

만약 이 글로 인해 호기심에 발동이 걸리셨다면, 스타일-컴포넌트에 대해 더 알아볼 수 있는 곳을 알려 드리겠습니다.

• Max Stoiber는 최근 Smashing Magazine에 스타일 컴포넌트를 사용하는 이유에 대해 정리한 글을 기고하였습니다.
• 스타일-컴포넌트 저장소 자체에도 방대한 양의 문서가 올라와 있습니다.
• Jamie Dixon이 쓴 기사에 스타일-컴포넌트 사용을 통해 얻을 수 있는 몇가지 장점이 소개되어 있습니다.
• 라이브러리가 실제로 어떻게 구현되어 있는지 궁금하다면, Max가 쓴 글을 참고하세요.

그리고 만약 여기서 더 무언가를 배워보고 싶다면, CSS에 대한 접근 방식을 다른 시각에서 제안한 Glamor도 한번 살펴보세요!