본문 바로가기

■ 프로그래밍/HTML, CSS

styled component, emotion 소개

SASS(or CSS)로 스타일링을 할 경우, 나중에 많은 컴포넌트를 유지보수하기에는 시간이 너무 오래 걸린다. 

또한 다른 개발자가 해야할 경우 어느게 어떤 것인지 바로 찾기가 쉽지 않다. 

 

때문에 개발자들은 더 효율적으로 코딩을 하기 위해 최근 css-in-js 스타일링 방식인 styled component와 emotion을 사용하고 있다. 

두 가지 모두 자바스크립트 파일 안에 CSS를 작성하는 형태로 차이점이 엄청 크지 않다. 

 

 

Styled Component 

홈페이지: https://styled-components.com/

 

 

설치

npm install --save styled-components

 

사용법

 

 

 

emotion

홈페이지: https://emotion.sh/docs/introduction

 

 

설치

npm install --save @emotion/core

 

사용법

 

 

 

 

 

 

'■ 프로그래밍 > HTML, CSS' 카테고리의 다른 글

styled component, emotion 소개  (0) 2020.06.03
image vh, vw 속성  (0) 2020.04.22
[CSS] Image-Sprite  (0) 2020.04.03
[CSS] Flex  (0) 2020.03.30
[CSS] float  (0) 2020.03.23
[CSS] inline, block, inline-block  (0) 2020.03.23