emotion/css 와 emotion/react의 css사용 차이는 뭘까?

 

리액트의 공통 라이브러리 만드는 중에 CSS In JS중 emotion을 사용하고 있었습니다.  기존 프로젝트에서 emotion/css와 emotion/react 2개의 라이브러리를 import하여 사용하고 있었는데 이 두개의 차이점이 궁금해져서 제가 찾은 내용을 공유해보려고 합니다.

 

먼저 라이브러리 비교를 하자면 아래와 같습니다

 

1. emotion/react

• emotion/react는 Emotion 라이브러리의 React용 기능을 포함합니다.
• 이 패키지를 사용하면 React 애플리케이션에서 Emotion의 강력한 CSS-in-JS 기능을 사용할 수 있습니다.
• Emotion의 styled API를 활용하여 React 컴포넌트를 스타일링하는 데 주로 사용됩니다.
• styled API를 사용하면 컴포넌트를 정의하면서 동시에 해당 컴포넌트에 스타일을 적용할 수 있습니다.
• 예를 들어, import { styled } from '@emotion/react';를 통해 컴포넌트를 스타일링할 수 있습니다.

2. emotion/css

• emotion/css는 Emotion 라이브러리의 순수 CSS 작성 기능을 제공합니다.
• 이 패키지를 사용하면 JavaScript 코드 밖에서도 Emotion의 CSS 작성 기능을 사용할 수 있습니다.
• 이를 통해 일반적인 CSS 파일과 같은 방식으로 스타일을 작성할 수 있습니다. 이를 "Global Styles"로 볼 수 있습니다.
• css 함수를 사용하여 스타일을 작성하고, 이를 컴포넌트에서 import하여 전역적으로 적용할 수 있습니다.
• 예를 들어, import { css } from '@emotion/css';를 통해 전역적으로 CSS 스타일을 작성하고 적용할 수 있습니다.

 

위 2개의 특징만 비교해보자면 emotion/react는 react용으로 styled API가 사용가능하다는 점 입니다.

emotion/css는 순수 css작성이 가능하다고 한점이 특징인것 같네요

좀더 예를들어서 비교해보도록 하겠습니다.

 

 

 

1. emotion/react

 Serialized CSS 사용

• Serialized CSS는 JavaScript 코드 내에서 정의된 스타일 객체를 CSS 코드로 변환하는 과정을 의미합니다.
• 이 과정은 빌드 시에 일어납니다. JavaScript 코드 내의 CSS 스타일 객체들이 실제로 사용 가능한 CSS로 컴파일되는 것을 의미합니다.
• 컴파일된 CSS는 일반적인 CSS 파일에 포함되거나 <style> 태그 내에 삽입됩니다.
• 이렇게 컴파일된 CSS를 브라우저는 해석하여 실제 스타일을 적용합니다.

import { css } from '@emotion/react'

const someStyle = css`
  display: none;
`;

const exampleComponent = () => {
	...
	return (
    	<div css={someStyle}>
        	...
        <div>
	)
}

 

2. emotion/css

className 사용

• 각 스타일 객체는 고유한 클래스 이름으로 연결됩니다. 이 클래스 이름은 일반적으로 랜덤한 문자열로 구성됩니다.
• 클래스 이름은 스타일 객체를 적용할 때 사용되며, 컴포넌트의 HTML 요소에 클래스 이름을 삽입하여 해당 스타일이 적용되도록 합니다.
• 예를 들어, <div className={styles.container}>와 같은 방식으로 클래스 이름을 사용하여 스타일을 적용할 수 있습니다.
• 클래스 이름은 각 컴포넌트가 유니크한 스타일을 가지도록 보장합니다.

import { css } from '@emotion/emotion'

const someStyle = css`
    display: none;
`

const exampleComponent = () => {
	...
	return (
    	<div className={someStyle}>
        	...
        <div>
	)
}

 

 

요약

emotion/css:

• 반응형에서 className 속성을 사용합니다.
• 커스텀 JSX 파서가 필요하지 않습니다.
• Babel 설정이나 파일 pragmas가 필요하지 않습니다.
• 추가적인 TypeScript 설정이 필요하지 않습니다.
• React 컴포넌트 외부에서 클래스 이름을 생성합니다.

emotion/react:

• @emotion/cache에 대해 구성이 필요하지 않습니다.
• 서버 측 렌더링이 간편합니다.
• css 함수를 통해 테마에 쉽게 접근할 수 있습니다.