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

 

사용법