1. emotion.js란 무엇인가?

CSS-in-JS의 한 종류로 JavaScript 안에서 스타일을 작성할 수 있게 해준다.

2. emotion.js 활용

설치

// Vanilla JS
npm install @emotion/css

// React
npm install @emotion/react

ex)

/** @jsxImportSource @emotion/react */
import { jsx, css } from "@emotion/react";

const spanStyle = css`
  background-color: gray;
  color: white;
  font-size: 2vw;
  label: spanStyle;
`;
  // emotion.js는 styled-components처럼 브라우저에서 열었을 때 className을 임의로 생성해준다.
  // @emotion/babel-plugin을 사용하면 커스터마이징 가능하다.

function App() {
  return (
    <div>
      <span css={spanStyle}>hello world</span>
    </div>
  );
}

/** @jsxImportSource @emotion/react */

⇒ 주석이라고 생각하고 작성하지 않으면 emotion.js가 적용되지 않는다.