[개발일지] Emotion.js의 적용

남현우·2022년 11월 16일
2
post-thumbnail
post-custom-banner

CSS-In-Js

지금까지는 Css혹은 SCSS를 통해 스타일을 적용해왔는데, Css-In-Js로 작성해보는 것도 좋을 것 같아 적용해보기로 했다.
그 전에 Css-In-Js는 Css-In-Css에 비해 어떤 차이가 있어 리액트에서 종종 쓰이는지 확인해 보려한다.

2014년 페이스북 개발자인 Vjeux가 처음 소개한 기술로, CSS를 JS안에서 작성하는 방식이다.
속도면에서는 Css-In-Css보다 좀 더 느릴 수 있지만,
인터렉티브한 디자인이 많지 않은 경우 보다 뛰어난 개발 경험을 제공한다.
그는 아래와 같이 Css-In-Js가 CSS에 비해 장점을 가지고 있다고 설명했다.

  • Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
  • Dependencies: CSS간의 의존 관계를 관리
  • Dead Code Elimination: 미사용 코드 검출
  • Minification: 클래스 이름의 최소화
  • Sharing Constants: JS와 CSS의 상태 공유
  • Non-deterministic Resolution: CSS 로드 우선 순위 이슈
  • Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈

이러한 발표 이후 다양한 라이브러리가 나왔으나 대표적으로 Styled Components라는 라이브러리가 있다.
이 라이브러리는 아래와 같은 장점을 가지며 활발히 사용되어오고 있다.

  • 짧은 길이의 유니크 한 클래스를 자동으로 생성하는 코드 경량화.
  • CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성.
  • 자바스크립트와 CSS 사이의 상수와 함수를 공유.
Emotion.js

Emotion.js는 Styled Components라이브러리와 비슷한 라이브러리로 퍼포먼스, 용량에도 큰 차이가 없다.
하지만 CSS prop이라는 기능을 유용하게 사용할 수 있고, 좀 더 유연하며,
SSR환경에서 사용하기에 설정이 훨씬 간편하다는 장점이 있어 보다 많이 사용되고 있다.
(* 최근에는 만족도가 점점 떨어지고 있다 한다.)

React에 Emotion.js 적용

Yarn Berry를 활용하고 typescript로 작성한 React에 Emotion.js를 적용하는 방법은 간단하면서도 귀찮다.
먼저 아래의 명령어를 통해 emotion.js를 설치해준다.

yarn add @emotion/react @emotion/styled

이후 test.tsx파일과 같이 컴포넌트에서 아래처럼 스타일을 적용한다면?

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

const TestStyle = css`
    font-size: 50px;
`;

const TestComponent = ():JSX.Element => {
	return(
      <p css={TestStyle}>테스트입니다.<p/>
    );
}

네, 오류가 발생합니다.

오류가 발생하는 이유는 두 가지가 있을텐데, 먼저 p와 같은 html 태그에는 css라는 속성이 존재하지 않기 때문이고,
다음으로는 jsx pragma를 작성하지 않아서 발생하는 오류이다.
pragma는 컴파일러에게 입력을 처리하는 방법을 알려주는 지시문이다.

자 두 설정을 해주려면 tsconfig파일을 설정하고,
emotion.js를 사용하는 모든 코드 상단에 /** @jsxImportSource @emotion/react */를 작성하면 되겠지만
보다 편한 개발을 위해 babel을 통해 pragma없이 진행해보자.
craco 혹은 react-app-rewired를 통해 CRA를 eject하지 않고 babel 설정을 할 수 있기에 craco를 통해 진행해봤다.

  1. 먼저 아래 명령어를 통해 필요한 내용을 설치한다.
yarn add @babel/preset-react @babel/preset-typescript @craco/craco @emotion/babel-plugin @emotion/babel-preset-css-prop @emotion/core @emotion/css
  1. 다음으로 tsconfig파일에 아래를 추가해준다.
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"types": ["@emotion/react/types/css-prop"]
  1. tsconfig파일에 start, build, test를 아래와 같이 변경한다.
"start": "craco start",
"build": "craco build",
"test": "craco test",
  1. 마지막으로 최상위 디렉토리에 craco.config.ts 파일을 생성해 아래 코드를 작성해준다.
export default {
    babel: {
        presets: [
            [
            "@babel/preset-react",
            { runtime: "automatic", importSource: "@emotion/react" },
            ],
        ],
        plugins: ["@emotion/babel-plugin"],
    },
};

이제 문제없이 emotion.js를 통해 코드를 작성할 수 있다.
다만 eslint를 사용한다면 아래의 설정이 추가적으로 필요하다.

  1. eslint 관련 플러그인 설치.
yarn add -D eslint-config-react-app @types/eslint @emotion/eslint-plugin
  1. eslintrc.json에 아래 추가 작성.
"plugins": [
        "@emotion"
    ],
"rules": {
        "react/react-in-jsx-scope": "off",
        "react/no-unknown-property": ["error", { "ignore": ["css"] }]
    }

이렇게 조금 귀찮지만 간단하게 설정을 마치고 emotion.js를 사용할 수 있게 되었다.
프로젝트 하나를 위해 설정을 해줘야하는게 많다보니 이런 시간이 제일 오래 걸리는 것 같다.
코드 작성도 조금 진행했지만 공유하면 좋을 내용이 생기면 빨리 다듬어서 더 작성해보려 한다.

profile
개발 관련 지식을 기록하는 블로그입니다.
post-custom-banner

0개의 댓글