What is Emotion

• css style with JavaScript

Main Two Category

프레임워크 구애받지 않는 방식

• 추가 설정 플러그인 변경 없이 사용
• css 함수를 사용해서 클래스 이름을 생성하고, 구성하는 것을 선호

React와 함께 사용

npm i @emotion/react

• css prop 을 지원한다.
  • style prop와 유사하다.
  • 하지만 자동으로 vendor-prefixing, nested selectors, media quires를 지원한다.
  • css props 는 테마를 인자로 받아올 수 있다.
    • 개발자가 common, 혹은 custom 된 값을 사용할 수 있도록 한다,
  • 컴포넌트나 스타일링에 필요한 boilerplate를 생성할 수 있다.
• SSR시에도 별다른 설정이 필요하지 않다.
• 테마를 out of box 개념으로 입힐 수 있다.
• 적절한 패턴과 구성 설정을 위해 eslint-plugin 사용 가능

CSS Prop

• css prop은 이모션에서 제공하는 element 스타일링의 핵심 기법이다.
• 간결하고 유연하게 컴포넌트를 스타일링 할 수 있다.

<aside> 💡 Babel Preset, JSX Pragma 두 가지 방식으로 제공한다

</aside>