반응형
css-in-js
-
[CSS/Side Lib.] Emotion.jsFront-End(Web)/HTML, CSS 2022. 7. 21. 00:35
🧐 서론 작년, React 개발을 막 시작할 때 Styled-Components 라이브러리에 대해 포스팅하면서 CSS-in-JS를 같이 언급하였다. CSS-in-JS는 말 그대로 스타일 정의를 css파일이 아닌 JS로 작성된 컴포넌트에 삽입하는 기법이다. 그렇기에, 컴포넌트 단위로 개발하는 모던 프레임워크에서 각광받는 기법이며, Styled-Components, Emotion.js 등이 대표적인 CSS-in-JS 라이브러리로 사용되고 있다. CSS-in-JS는 컴포넌트 단위 개발 외에 아래와 같은 장점들, 그리고 trade-off성 단점들을 가지고 있다. [장점] 컴포넌트 내에 CSS를 작성하므로, 별도의 stylesheet 파일을 관리할 필요가 없다. CSS 모델을 Global 레벨이 아닌 컴포넌트 레..