Emotion과 Tailwind CSS

dohun2·2023년 11월 29일

Emotion vs Tailwind CSS

부스트캠프에서의 마지막 6주! 팀 프로젝트가 시작되었습니다.
본격적으로 개발을 시작하기 앞서 CSS를 어떤 방식으로 사용할 지 고민하는 과정을 기록해 보았습니다.

고민배경

지난 8주간 진행한 2개의 프로젝트에서는 각각 CSS와 SCSS를 사용하였는데
SCSS를 사용할 때 mixin으로 중복을 편하게 제거하고 계층구조 표현 방식으로 가독성이 개선되는 것을 경험했고 결과적으로는 스타일 코드를 작성하는 시간이 줄어들게 되었습니다.

CSS에서 SCSS로 넘어갔을 때 효과를 경험한 직후라 시간이 촉박한 프로젝트에서는 더 빠르고! 더 편하게!
스타일 코드를 작성해 보고 싶은 욕심이 생겼고 방법을 고민하게 되었습니다.

CSS-in-JS vs Atomic CSS

현재 사용하는 여러 가지 방법 중 CSS 모듈을 사용하는 방법은 SCSS에서 사용하였고 그보다 더 나은 방법을 경험하기 위한 것이므로 제거하고 CSS-in-JS 와 Atomic CSS 중 사용하는 것으로 결정하였고
CSS-in-JS의 emotion, styled-components와 Atomic CSS인 tailwind를 비교해 보았습니다.

다운로드 횟수 비교

다운로드수 비교 https://npmtrends.com 을 통해 비교한 패키지의 다운로드 횟수 그래프입니다.
격차가 크진 않았지만 emotion > tailwindcss > styled-components 순으로 많이 사용되고 있음을 알 수 있습니다.

사용성 비교

사용성을 비교해 보기 위해서 각각 공식 문서 페이지의 시작하기 부분을 참고해 간단한 박스를 구현해 보았습니다.

CSS-in-JS의 방법 중 Emotion과 Styled-components의 코드 작성 스타일이 비슷하고 현재로서는 큰 차이를 알 수 없었기 때문에 다운로드 횟수가 높은 Emotion으로 진행하였습니다.

Emotion

Emotion은 사용할 환경과 방법에 따라 패키지가 구분되어 있었고 필요한 패키지만 가져와 사용할 수 있었습니다.

리액트 프로젝트

@emotion/react : CSS Prop을 이용하는 방식
@emotion/styled : Styled-components와 같이 styled를 이용하는 방식

바닐라JS 프로젝트

@emotion/css : CSS Prop을 이용하는 방식!

텍스트 박스 그려보기

@emotion/react 사용 시

// css prop에 직접 작성하는 방법
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export const A = () => {
  return (
    <div
      css={css`
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px;
        color: white;
      `}
    >
      Emotion React.
    </div>
  );
};

// css prop에 변수를 넣는 방법
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export const A = () => {
  return <div css={textBoxCss}>Emotion React.</div>;
};

const textBoxCss = css`
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px;
  color: white;
`;

const smalltextstyle = css`
	font-size: 10
`

const smallbax = div`
	${smalltextstyle}

/** @jsxImportSource @emotion/react */
create-react-app으로 생성한 프로젝트의 경우
Babel 트랜스파일러한테 JSX 코드를 변환할 때, React의 jsx() 함수 대신 Emotion의 jsx() 함수를 대신 사용하라고 알려줘야 CSS가 정상적으로 출력됩니다.

@emotion/styled 사용 시

import styled from "@emotion/styled";

export const B = () => {
  return <TextBox>Emotion Styled.</TextBox>;
};

const TextBox = styled.div`
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 50px;
  color: white;
`;

개인적으로 @emotion/react를 사용하는 것보다 깔끔하게 작성하는 방법이라고 생각되지만 변수명에 따라서 어떤 HTML 태그인지 파악하기 어려울 것 같다는 단점이 있습니다.

Tailwind CSS

export const C = () => {
  return (
    <div className='w-[100px] h-[100px] bg-emerald-400 m-[50px] text-white'>
      Tailwind CSS.
    </div>
  );
};

장점
- emotion과 비교해 가장 짧은 코드로 작성이 가능했습니다.
단점
- 처음 사용 시 CSS 속성을 알고있어도 어떤 키워드로 접근해야 하는지 알 수 없어 키워드를 찾는데 상당한 시간이 소요되었습니다.
- HTML태그 내에서 작성되므로 속성값이 많아지면 가독성이 떨어질 수 있습니다.
@apply란?
- 재사용성과 CSS 속성이 많아져서 가독성이 떨어짐을 해결할 수 있는 기능
- index.css에 클래스명으로 저장하면 컴포넌트에서 사용이 가능

//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .text-box {
    @apply w-[100px] h-[100px] bg-emerald-400 m-[50px] text-white;
  }
}

// C.js
export const C = () => {
  return <div className='text-box'>Tailwind CSS.</div>;
};