[React] emotion.js 소개 및 사용법 (feat. CSS-in-JS)

 

 

CSS-in-JS 라이브러리 중 하나인 Emotion은 빠르고 유연하며 강력한 스타일링 솔루션을 제공합니다. React와 같은 JavaScript 기반 프레임워크에서 CSS를 더욱 효율적으로 관리할 수 있도록 설계되었으며, 개발자 경험을 극대화하는 도구로 널리 사랑받고 있습니다. 

 

Emotion CSS란?

Emotion은 JavaScript를 사용하여 CSS를 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. 기존의 CSS 파일 관리의 복잡함을 줄이고, 컴포넌트 기반 스타일링을 통해 코드 재사용성과 유지보수성을 높이는 데 초점이 맞춰져 있습니다.

주요 특징

1. CSS-in-JS: JavaScript 파일 내에서 CSS를 작성할 수 있습니다.

2. 스타일 컴포넌트 생성: CSS 클래스 이름 충돌을 방지하며, 동적으로 스타일링이 가능합니다.

3. 성능 최적화: 필요한 CSS만 추출하여 적용하므로 성능이 우수합니다.

4. 유연한 API 제공: styled와 css 같은 다양한 스타일링 방식 제공.

5. TypeScript 지원: TypeScript와 완벽히 호환되어 타입 안전성을 보장합니다.

 

 

Emotion의 설치와 기본 사용법

설치 방법

Emotion은 두 가지 주요 패키지로 구성됩니다. @emotion/react는 React와 함께 사용하기 위한 패키지이고, @emotion/styled는 styled-components와 유사한 방식으로 사용됩니다.

// 기본 패키지 설치
npm install @emotion/react @emotion/styled

 

기본 사용법

1. CSS 스타일링

css 함수는 스타일을 JavaScript 객체 형태로 정의합니다.

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

const buttonStyle = css`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
`;

function App() {
  return <button css={buttonStyle}>Click Me</button>;
}

 

2. Styled Components 방식

@emotion/styled를 사용하면 styled-components와 비슷한 방식으로 스타일링이 가능합니다.

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #2ecc71;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
`;

function App() {
  return <Button>Click Me</Button>;
}

 

3. Props를 사용한 동적 스타일링

styled 또는 css를 사용하여 props에 따라 동적으로 스타일을 변경할 수 있습니다.

const Button = styled.button`
  background-color: ${(props) => (props.primary ? '#e74c3c' : '#3498db')};
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </>
  );
}

 

Emotion의 장단점

장점

1. CSS 클래스 이름 충돌 방지

• Emotion은 자동으로 고유한 클래스 이름을 생성하므로, CSS 클래스 이름 충돌 문제를 완벽히 해결합니다.

2. 모듈화와 재사용성

• 스타일이 컴포넌트 내부에 캡슐화되어 있어 재사용성과 유지보수성이 뛰어납니다.

3. 동적 스타일링

• 조건부 스타일링과 props를 사용한 동적 스타일링이 쉽습니다.

4. 서버사이드 렌더링(SSR) 지원

• Emotion은 SSR을 기본적으로 지원하며, 이를 통해 스타일이 초기 렌더링 시 바로 적용됩니다.

5. TypeScript와의 완벽한 호환성

• 타입 정의를 통해 더욱 안전하고 효율적인 개발이 가능합니다.

6. 강력한 성능

• 필요한 스타일만 브라우저에 전달하여 렌더링 속도를 최적화합니다.

 

단점

1. 런타임 의존성

• 스타일이 런타임에 생성되므로 빌드된 CSS에 비해 실행 시 약간의 성능 부담이 있을 수 있습니다.

• 이를 해결하기 위해 Babel 플러그인을 사용해 스타일을 사전에 컴파일할 수 있습니다.

2. 학습 곡선

• 기존 CSS 방식에서 전환할 때 새로운 문법과 개념을 익혀야 하는 진입 장벽이 존재합니다.

3. 도구 의존성

• Emotion은 특정 도구와의 통합(예: Babel 플러그인 설정)이 필요할 수 있습니다.

 

실전 활용 예제

1. 글로벌 스타일 적용

Emotion을 사용하여 프로젝트 전역에 CSS를 적용할 수 있습니다.

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

const globalStyles = css`
  body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
  }
`;

function App() {
  return (
    <>
      <Global styles={globalStyles} />
      <h1>Emotion CSS</h1>
    </>
  );
}

2. 미디어 쿼리 사용

미디어 쿼리를 사용하여 반응형 디자인을 구현할 수도 있습니다.

const responsiveStyle = css`
  font-size: 16px;

  @media (min-width: 768px) {
    font-size: 24px;
  }

  @media (min-width: 1024px) {
    font-size: 32px;
  }
`;

function App() {
  return <div css={responsiveStyle}>Responsive Text</div>;
}