Emotion: 스타일링을 위한 강력한 CSS-in-JS 라이브러리

프론트엔드 개발에서 컴포넌트 기반의 UI 개발이 대세가 되면서 스타일링에도 더 모던하고 유연한 방법이 필요해졌습니다. Emotion은 이러한 요구를 충족시키기 위해 등장한 CSS-in-JS 방식의 스타일링 라이브러리입니다. Emotion은 스타일을 JavaScript 코드와 함께 작성하면서도 강력한 퍼포먼스와 개발자 경험(Developer Experience)을 제공합니다.

이번 글에서는 Emotion이 무엇인지, 왜 사용해야 하는지, 주요 기능, 사용법, 그리고 다른 CSS-in-JS 라이브러리와의 차이점에 대해 자세히 알아보겠습니다.

---

1. Emotion이란?

Emotion은 CSS를 JavaScript 코드 안에서 작성할 수 있도록 해주는 CSS-in-JS 라이브러리입니다. React와 같은 프론트엔드 프레임워크에서 사용되며, 컴포넌트별로 스타일을 모듈화하고 동적으로 관리할 수 있게 해줍니다.

Emotion의 주요 특징:

• CSS-in-JS: JavaScript 코드 안에서 CSS를 작성.
• 퍼포먼스 최적화: 런타임과 빌드 타임 모두에서 최적화된 성능 제공.
• 유연성: 스타일 작성 시 객체 스타일링, 템플릿 리터럴 스타일링 등 다양한 방식 지원.
• TypeScript 지원: 타입 정의와 호환성이 뛰어남.

Emotion이 잘 어울리는 환경:

• React 기반 애플리케이션.
• 컴포넌트 단위로 모듈화된 스타일링이 필요한 경우.
• 동적 스타일링과 테마 기능이 요구되는 프로젝트.

---

2. CSS-in-JS란?

CSS-in-JS는 JavaScript 안에서 CSS를 작성하고 관리하는 접근 방식입니다. 기존의 CSS 파일을 별도로 작성하는 대신 스타일을 JavaScript 코드와 함께 작성하기 때문에 컴포넌트 단위로 스타일을 모듈화하고, 유지보수를 용이하게 할 수 있습니다.

CSS-in-JS의 장점:

• Scoped 스타일: 컴포넌트에 국한된 스타일을 작성할 수 있어 스타일 충돌 방지.
• 동적 스타일링: JavaScript의 변수와 로직을 사용해 동적으로 스타일 적용 가능.
• CSS 재사용: 함수나 상수를 통해 스타일을 효율적으로 재사용.

---

3. Emotion의 주요 기능

Emotion은 강력하고 유연한 스타일링을 지원하는 다양한 기능을 제공합니다.

1) 두 가지 스타일링 방식

Emotion은 두 가지 스타일링 방식을 지원합니다:

1. 템플릿 리터럴 스타일링 (@emotion/react)
   • CSS를 문자열 템플릿 리터럴로 작성합니다.
2. 객체 스타일링 (@emotion/css)
   • JavaScript 객체를 사용하여 스타일을 작성합니다.

---

2) @emotion/react - 템플릿 리터럴 스타일링

설치

npm install @emotion/react

사용법

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

const buttonStyle = css`
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  &:hover {
    background-color: #005bb5;
  }
`;

function App() {
  return <button css={buttonStyle}>Emotion Button</button>;
}

export default App;

• css 태그 함수: CSS를 템플릿 리터럴로 작성할 수 있습니다.
• Scoped 스타일: 스타일이 컴포넌트 단위로 적용되어 충돌을 방지합니다.

---

3) @emotion/css - 객체 스타일링

설치

npm install @emotion/css

사용법

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

const buttonStyle = css({
  backgroundColor: '#0070f3',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: '#005bb5',
  },
});

function App() {
  return <button className={buttonStyle}>Emotion Button</button>;
}

export default App;

• 객체 스타일링: JavaScript 객체로 스타일을 작성합니다.
• 동적 스타일링: 객체의 값을 동적으로 계산하여 사용할 수 있습니다.

---

4) 컴포넌트 스타일링 (Styled Components 방식)

Emotion은 styled-components와 비슷한 스타일링 방식을 지원합니다.

설치

npm install @emotion/styled

사용법

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;

  &:hover {
    background-color: #005bb5;
  }
`;

function App() {
  return <Button>Styled Emotion Button</Button>;
}

export default App;

• styled API: React 컴포넌트를 스타일링된 컴포넌트로 쉽게 생성할 수 있습니다.
• 사용법: styled 함수로 HTML 요소나 기존 컴포넌트에 스타일을 추가합니다.

---

5) 테마 지원

Emotion은 전역적으로 테마를 설정하고, 각 컴포넌트에서 이를 사용할 수 있도록 지원합니다.

테마 설정 예제

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

const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#ff4081',
  },
};

const buttonStyle = css`
  color: ${(props) => props.theme.colors.primary};
  border: 1px solid ${(props) => props.theme.colors.secondary};
  padding: 10px 20px;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <button css={buttonStyle}>Themed Button</button>
    </ThemeProvider>
  );
}

export default App;

• ThemeProvider: 테마를 전역적으로 설정합니다.
• 테마 객체 사용: 테마 값에 접근해 동적으로 스타일을 적용할 수 있습니다.

---

4. Emotion vs 다른 CSS-in-JS 라이브러리

Emotion은 Styled Components와 비교되는 경우가 많습니다.

비교 항목EmotionStyled Components

스타일링 방식	템플릿 리터럴, 객체 스타일링 지원	템플릿 리터럴 방식만 지원
성능 최적화	빌드 시 최적화된 CSS 출력 제공	런타임 중심 최적화
유연성	다양한 스타일 작성 방식 제공	상대적으로 제한된 스타일 작성 방식
생태계 및 확장성	React 외에도 다양한 프레임워크에서 사용 가능	React 전용

---

5. Emotion의 장단점

장점

1. 유연한 스타일링: 템플릿 리터럴과 객체 스타일링을 모두 지원.
2. 퍼포먼스 최적화: 빌드 타임 최적화를 통해 성능 향상.
3. TypeScript 지원: 타입 안전성을 보장.
4. 테마 지원: 전역 테마 설정과 사용이 간편.

단점

1. 학습 곡선: 기존 CSS만 사용하던 개발자에게는 학습이 필요.
2. CSS 파일 분리 부족: 모든 스타일이 JavaScript에 포함되므로 CSS 파일이 따로 존재하지 않음.

---

6. 결론

Emotion은 현대적인 프론트엔드 개발에 최적화된 CSS-in-JS 라이브러리입니다. 강력한 퍼포먼스 최적화, 다양한 스타일 작성 방식, 그리고 테마 관리 기능을 제공하여 React 개발자들이 선호하는 스타일링 솔루션 중 하나입니다.

템플릿 리터럴과 객체 기반 스타일링, 그리고 styled API를 통해 다양한 요구사항을 충족할 수 있으며, 유연하고 확장 가능한 스타일링을 구현할 수 있습니다. Emotion을 사용하면 더욱 직관적이고 효율적인 스타일링 환경을 구축할 수 있습니다.