[styled-components] styled-components 소개 및 설치 방법

Made with by glenmaddern, mxstbr, _philpl‬, probablyup, imbhargav5 and contributors.

[styled-components] styled-components 소개 및 설치 방법

(styled-components 버전 : 5.0.1, 글쓴날 : 2020.03.10)

 

---

* 이 글은 styled-components에 대한 단순 소개 글입니다.

---

 

 

styled-components 소개 및 설치

---

1) styled-components란?

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리입니다.

 

물론, 이러한 인라인 스타일링이 별로 달갑지 않은 분들도 계실 것 같습니다.

또한, 저의 경우에도, 인라인 스타일링을 선호하지 않는 편입니다.

 

그럼에도 불구하고 제가 styled-components를 사용하게 된 계기는,

우선 React의 경우 컴포넌트가 많으면 많아질수록 분리되어 있는 CSS 파일들을 일일이 찾아 수정하는 것이 얼마나 귀찮고 짜증 나는 일인지는 다들 동감하실 겁니다.

만약 styled-components를 사용하신다면, CSS를 컴포넌트화하여 JSX로 사용할 수 있습니다.

뿐만 아니라, 결정적인 요인은 바로 CSS에 Props를 사용할 수 있다는 점입니다.

React의 주요 메커니즘 중 하나인 Props를 CSS에 적용할 수 있다는 것 때문에 특정 컴포넌트에서는 styled-components를 적용하는 것이 엄청난 효율을 가져오는 것 같습니다.

 

이러한 매력을 저만 느꼈던 것이 아닌지 styled-components는 현재 npm에서 주마다 약 160만번이나 다운로드 되고 있으며 인기 있는 대세 라이브러리가 되었습니다.

 

* 글 쓴 날 기준 npm 다운로드 수

출처 : npm styled-components 페이지

 

* styled-components가 적용된 사이트 (이외에도 VOGUE, LEGO, Under Armour 등 수많은 곳에서 적용 중입니다.)

출처 : styled-components 공식 홈페이지

---

2) styled-components 설치

간단하게 npm 혹은 Yarn을 이용하여 설치하실 수 있습니다.

 

(1) npm 설치 명령어

npm install styled-components

 

(2) Yarn 설치 명령어

yarn add styled-components

 

설치 완료 후, 적용하실 프로젝트 파일에

import styled from 'styled-components';

임포트 하여 본격적으로 사용하시면 되겠습니다!

---

 

 

---

 

 

여기까지 대세 CSS-in-JS 라이브러리인 styled-components에 대하여 알아보았습니다.

만약, 이 글을 보시고 styled-components에 매력을 느껴 한번 사용해 봐야겠다는 생각이 드신다면...

 

* styled-components 공식 홈페이지 : styled-components 공식 홈페이지

styled-components

위의 styled-components 공식 홈페이지를 방문하셔서 사용법 등을 참조하시면 되겠습니다.

감사합니다!