환경설정: CSS관리, Emotion VS TailwindCSS

CSS in JS

CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말합니다.

 

CSS in JS의 장점

- 별도의 css 파일을 만들어 관리하는 것이 아닌, 컴포넌트 별로 CSS를 작성해 관리할 수 있습니다. 

-> 따라서 CSS명을 지정하는데 큰 어려움 없이 작성할 수 있습니다.

- 변수와 함께 동적 스타일링을 구성할 수 있습니다.

- 사용되는 스타일만 번들에 포함되어 코드 분할에 이점을 가질 수 있습니다.

 

Emotion VS TailwindCSS

기존의 토이 프로젝트를 연습할 때는 TailwindCSS를 자주 사용하였으나, 최근 AWS 부트캠프에서의 과제에서는 Emotion을 도입하게 되었습니다.

TailwindCSS를 사용했던 이유는 Next.js를 연습하고 있었기도 했고, 비교적 러닝커브가 낮아 금방 적용해 볼  수 있었습니다.

다만, css가 코드 안에서 여기저기 존재하다보니, 가끔 코드가 지저분해지는 단점을 느꼈습니다.

function App () {
	return (
    	<div classname={'flex ...기타 등등'}>Hello World</div>
        )
    }

import {css} from '@emotion/react'

const containerStyles = css`
	display: flex;
    ...기타 등등
`

function App() {
	return (
    	<div css={containerStyles}>Hello World</div>
     	)
    }

 

이런 식으로 사용하는데 지금은 코드가 짧아 Tailwind가 더 가독성이 좋아 보이지만, 코드가 길어지면 꽤나 지저분해 보이는 단점이 있습니다.

 

// colors.ts
export const colors = {
  primary: "#0d6efd",
  border: "#ddd",
  /* ... */
};
// MyComponent.tsx
function MyComponent({ fontSize }) {
  return (
    <p
      css={{
        color: colors.primary,
        fontSize,
        border: `1px solid ${colors.border}`,
      }}
    >
      ...
    </p>
  );
}

 

또한, Emotion에서는 자바스크립트 변수를 style에 활용하기도 합니다.

여러가지 장점들이 많지만, 단점들도 존재합니다. 제가 경험한 토이 프로젝트에서는 체감하기 어려웠지만 SSR에서 구축하기 매우 어렵다는 점과 렌더링 이슈 등이 있다고 알고 있습니다.