Styled Components

CSS 코드를 다룰 때 다음과 같은 불편함을 느껴보신 적 있으신가요?

class, id 이름을 짓느라 고민한 적이 있다.
CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.
CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있다.
스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다.
이 외에도 여러가지 어려움이 있을 수 있는데요. 이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해주는 라이브러리가 있습니다. 바로 React 환경에서 사용 가능한 Styled Components 라는 라이브러리입니다.

Styled Components는 앞서 배운 CSS in JS 라는 개념이 대두되면서 나온 라이브러리입니다. 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이죠.

CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됩니다. 이런 CSS in JS 라이브러리 중에서 현재 가장 인기 있는 라이브러리가 바로 Styled Components 입니다. 이번 챕터에서는 이 Styled Components 사용법에 대해 알아보도록 합시다.

Styled Components 설치하기
Styled Components 의 설치는 간단합니다. 터미널에 아래의 명령어 한 줄을 입력해 Styled Components 라이브러리를 설치할 수 있습니다.

with npm

$ npm install --save styled-components

with yarn

$ yarn add styled-components
Styled Components는 package.json에 다음 코드를 추가하도록 권장하고 있습니다. 아래의 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여줍니다.

{
"resolutions": {
"styled-components": "^5"
}
}
그 다음 Styled Components를 사용할 파일로 불러와주면 사용 준비는 완료입니다!

import styled from "styled-components"
Styled Components 문법

컴포넌트 만들기

Styled Components로 컴포넌트를 만드는 방법은 다음과 같습니다.

Styled Components는 ES6의 Templete Literals 문법을 사용합니다. 즉, 따옴표가 아닌 백틱(`)을 사용합니다.

컴포넌트를 선언한 후 styled.태그종류를 할당하고, 백틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성해주면 됩니다. 이렇게 만든 컴포넌트를 React 컴포넌트를 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더되는 것을 확인할 수 있습니다.