출처 1: https://tech.osci.kr/2022/06/14/%EC%9B%B9-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-with-emotion/

출처 2: https://www.howdy-mj.me/css/emotion.js-intro/

@emotion/styled

스타일을 주기 위한 첫 번째 방법은 styled 입니다. styled를 사용하기 위해서는 @emotion/styled 패키지를 설치해야 합니다.

yarn add @emotion/styled

@emotion/styled 패키지는 styled-component에서 영향을 받아 만들어진 패키지인 만큼 작성 방법이 styled-component와 매우 유사합니다. 스타일은 template literal방식과 object방식으로 작성할 수 있습니다.

@emotion/bable-plugin

CSS selectors처럼 작성한 styled component 사용하기
@emotion/bable-plugin 패키지를 사용하면 CSS selectors처럼 다른 emotion styled component를 대상으로 선택할 수 있습니다.

@emotion/react

@emotion/react 패키지의 css prop을 활용하면 굳이 styled component를 만들지 않고도 스타일을 지정해 줄 수 있습니다.

yarn add @emotion/react

css prop를 사용하기 위해선 JSX Pragma를 작성해야 합니다. css prop을 사용하려는 코드 상단에 아래와 같이 작성해 줍니다.

/* @jsxImportSource @emotion/react /

import { css } from "@emotion/react";

결정

• babel-plugin은 직접 컴포넌트 이름을 설정할 수 있다는 것이 장점
• styled 에 친숙하니까 styled, react만 설치