CRA(Create React App) 환경에서 Emotion 설치해서 사용하기

원래는 스타일드 컴포를 가끔 사용하거나 그냥 일반 css파일을 사용하거나

혹은 scss를 사용하여 스타일링을 수정 등 했었습니다만 많은 사람들이 말하는 emotion이 궁금해서 한번 써보기로 결정

하지만 게으른 탓에 제대로 써보지도 못하다가 최근에 다시 토이프로젝트가 생성되어 도전합니다

---

설치 방법은 간단합니다. 터미널에서 아래와 같이 입력해줍니다

yarn add @emotion/react @emotion/styled
or
npm i @emotion/react @emotion/styled

저는 왠지 yarn이 좋아서 (가수 얀이 생각나서..? 연식 인증..) yarn을 사용합니다

사용법은 원래 아래 링크 주소를 통해서 익혔었는데요

https://howdy-mj.me/css/emotion.js-intro/

emotion.js 소개 및 사용법 (feat. CSS-in-JS)

이 분이 글도 참 잘쓰시고 유용한 정보가 꽤 있더라구요 :)

그런데 import하는 방식이 최신 방법이 아니어서 제가 꼭 공유하고자 합니다

---

/** @jsx jsx */
import { jsx, css } from '@emotion/core';

기존 방식이 위와 같았었는데요. 현재는 방식이 바뀌었습니다 (이름도 바뀌었습니다)

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

요렇게 작성해주셔야 정상적으로 작동합니다 이거 모르면 답답할 수 있어요

Cra환경이 아니신 분들은 바벨 설정으로 변경하는 방법도 있으니 관련 링크는 모조리 남겨놓겠습니다

이모션은 용량도 스타일드컴포에 비해서 좀 작은 편에 속하고, 스타일드컴포처럼 사용할수도 있으며,

또 인라인 스타일링도 편안하게 사용할 수 있어서 좋은 것 같습니다.

 

혹 사용하시며 공유하실 내용 있으시면 댓글 주시면 감사합니다

 

관련링크:

https://emotion.sh/docs/@emotion/react

Emotion - @emotion/react

https://github.com/emotion-js/emotion/issues/2041

React 17 + new JSX transform + JSX pragma/pragmaFrag · Issue #2041 · emotion-js/emotion

 

React 17 + new JSX transform + JSX pragma/pragmaFrag · Issue #2041 · emotion-js/emotion