[Emotion] CSS-in-JS 더알아보기

서론

기존 프로젝트는 CSS-in-JS 타입의 Styled-components와 미리 만들어진 유틸리티 클래스와 커스텀 클래스를 함께 활용할 수 있는 Tailwind CSS 프레임워크를 사용해보았는데, 이력서를 작성하기 시작하면서 채용공고들을 둘러보니, Sass나 Scss 뿐 아니라 emotion.js가 눈에 띄기 시작했다.

가볍게 서칭을 해보니 CSS-in-JS 타입으로 바닐라 자바스크립트나 리액트에서 주로 사용하는 것 같아 스터디를 해보려한다.

emotion.js 설치 및 적용

설치 커맨드라인

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

npm, yarn 등으로 @emotion/react @emotion/styled 를 설치한다.

컴포넌트에 Import 하기

emotion.js를 사용할 컴포넌트에 import를 해준다.

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

/** @jsx jsx */ 라인이 주석처리가 되어있어, 의미가 없는 영역인줄 알았는데, 없으니 컴파일 오류가 난다.
찾아보니 babel에게 React.createElement 대신 jsx를 jsx라는 함수로 변환하라는 뜻이라고 한다.(jsx-pragma)

jsx-pragma 없애보기

npm에서 @emotion/babel-preset-css-prop 을 설치하면 바벨이 이모션의 css를 이해할 수 있게 되어 jsx-pragma를 선언하지 않아도 이모션의 Jsx함수를 호출해서 컴포넌트를 렌더링 할 수 있다.


Create config-overrides.js

const { override, addBabelPreset } = require('customize-cra')
module.exports = override(
  addBabelPreset('@emotion/babel-preset-css-prop')
)

Components

import React from 'react'
import { css } from '@emotion/core' //이렇게만 추가해주면 된다! so simple

감상

• 아직 본격적으로 사용해보진 않았지만, 스터디를 해보니 스타일드 컴포넌트를 활용해보았다면 바로 프로젝트에 도입하기 큰 무리 없을 것으로 보인다.
• CSS in JS 타입은 스타일 적용 시 연산자를 같이 활용하거나, 편리한 재사용 등 개인적으로 만족도가 높은 방식이라 컴팩트한 코드관리를 목표로 재사용성을 극대화해서 적용해봐야지😤

참조

https://www.howdy-mj.me/css/emotionjs-intro
https://harryhedger.medium.com/quick-how-to-use-the-emotion-css-prop-with-create-react-app-5f6aa0f0c5c5