Emotion CSS-in-JS 스타일링 완벽 가이드

React에서 가장 많이 사용되는 CSS-in-JS 라이브러리인 Emotion의 핵심 개념을 실전 예제와 함께 정리했습니다. styled components, css prop, 동적 스타일링부터 테마, 애니메이션까지 고급 개발자를 위한 완벽 가이드입니다.

---

---

들어가며

이 글에서는 Emotion CSS-in-JS 스타일링 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. styled_컴포넌트_기본
2. Props_기반_동적_스타일링
3. css_prop_사용법
4. 객체_스타일_문법
5. ThemeProvider_활용
6. Theme_객체_사용하기
7. 스타일_컴포지션
8. keyframes_애니메이션
9. Global_스타일_정의
10. 중첩_선택자_활용
11. as_prop으로_엘리먼트_변경
12. CSS_변수와_함께_사용

---

1. styled_컴포넌트_기본

개요

Emotion의 styled API를 사용하여 스타일이 적용된 React 컴포넌트를 생성하는 가장 기본적인 방법입니다.

코드 예제

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
`;

설명

styled API로 버튼 엘리먼트를 감싸고 템플릿 리터럴 내부에 CSS를 작성하면, 스타일이 적용된 새로운 React 컴포넌트가 생성됩니다.

---

2. Props_기반_동적_스타일링

개요

컴포넌트의 props 값에 따라 스타일을 동적으로 변경할 수 있어 재사용성이 높은 컴포넌트를 만들 수 있습니다.

코드 예제

const Button = styled.button<{ variant: 'primary' | 'secondary' }>`
  padding: 12px 24px;
  background: ${props =>
    props.variant === 'primary' ? '#007bff' : '#6c757d'};
  color: white;
  border: none;
  border-radius: 8px;
`;

설명

TypeScript의 제네릭과 함께 props를 타입 정의하고, 템플릿 리터럴 내부에서 props 값을 참조하여 조건부 스타일을 적용합니다.

---

3. css_prop_사용법

개요

JSX 엘리먼트에 직접 css prop을 사용하여 인라인으로 스타일을 정의할 수 있는 방법입니다.

코드 예제

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

const App = () => (
  <div css={css`
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 12px;
  `}>
    Hello Emotion
  </div>
);

설명

@jsxImportSource 주석을 추가하고 css 함수로 생성한 스타일 객체를 css prop에 전달하면, 컴포넌트를 별도로 생성하지 않고도 스타일을 적용할 수 있습니다.

---

4. 객체_스타일_문법

개요

템플릿 리터럴 대신 JavaScript 객체 형태로 스타일을 정의할 수 있어 동적 계산이나 조건부 로직 작성이 편리합니다.

코드 예제

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

const containerStyle = css({
  display: 'flex',
  flexDirection: 'column',
  gap: 16,
  padding: 24,
  backgroundColor: '#f8f9fa',
  borderRadius: 8
});

설명

camelCase로 작성된 CSS 속성을 객체 형태로 정의하면, JavaScript의 모든 기능을 활용하여 스타일을 동적으로 생성할 수 있습니다.

---

5. ThemeProvider_활용

개요

전역 테마 객체를 제공하여 애플리케이션 전체에서 일관된 디자인 시스템을 구축할 수 있습니다.

코드 예제

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

const theme = {
  colors: { primary: '#007bff', secondary: '#6c757d' },
  spacing: { sm: 8, md: 16, lg: 24 }
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Button />
  </ThemeProvider>
);

설명

ThemeProvider로 감싼 하위 컴포넌트들은 theme prop을 통해 테마 객체에 접근할 수 있어, 디자인 토큰을 중앙 관리할 수 있습니다.

---

6. Theme_객체_사용하기

개요

styled 컴포넌트 내부에서 theme 객체에 접근하여 일관된 스타일 값을 사용할 수 있습니다.

코드 예제

const Card = styled.div`
  padding: ${props => props.theme.spacing.md}px;
  background: ${props => props.theme.colors.primary};
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
`;

설명

props.theme를 통해 ThemeProvider로 제공된 테마 객체의 값을 참조하여, 디자인 시스템의 일관성을 유지할 수 있습니다.

---

7. 스타일_컴포지션

개요

여러 스타일 객체를 조합하여 재사용 가능한 스타일 패턴을 만들 수 있습니다.

코드 예제

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

const baseStyle = css`
  padding: 12px;
  border-radius: 8px;
`;

const primaryStyle = css`
  ${baseStyle}
  background: #007bff;
  color: white;
`;

설명

기본 스타일을 정의하고 이를 다른 스타일 내부에 포함시켜 스타일을 조합하면, 중복 코드를 줄이고 일관성을 높일 수 있습니다.

---

8. keyframes_애니메이션

개요

Emotion의 keyframes를 사용하여 CSS 애니메이션을 정의하고 컴포넌트에 적용할 수 있습니다.

코드 예제

import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
`;

const Box = styled.div`
  animation: ${fadeIn} 0.3s ease-in-out;
`;

설명

keyframes로 애니메이션을 정의하고 styled 컴포넌트의 animation 속성에서 참조하면, 부드러운 애니메이션 효과를 구현할 수 있습니다.

---

9. Global_스타일_정의

개요

애플리케이션 전역에 적용되는 CSS 리셋이나 기본 스타일을 정의할 수 있습니다.

코드 예제

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

const App = () => (
  <>
    <Global styles={css`
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font-family: -apple-system, sans-serif; }
    `} />
    <MainContent />
  </>
);

설명

Global 컴포넌트의 styles prop에 전역 스타일을 정의하면, 전체 애플리케이션에 기본 스타일을 일괄 적용할 수 있습니다.

---

10. 중첩_선택자_활용

개요

Sass처럼 중첩된 선택자를 사용하여 하위 엘리먼트나 가상 선택자의 스타일을 정의할 수 있습니다.

코드 예제

const Card = styled.div`
  padding: 20px;
  background: white;

  &:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }

  h2 { margin-bottom: 12px; color: #333; }

  p { line-height: 1.6; color: #666; }
`;

설명

& 기호로 자기 자신을 참조하거나 하위 엘리먼트 선택자를 중첩하여 작성하면, 관련된 스타일을 한 곳에 모아 관리할 수 있습니다.

---

11. as_prop으로_엘리먼트_변경

개요

styled 컴포넌트의 스타일은 유지하면서 렌더링되는 HTML 엘리먼트나 컴포넌트를 동적으로 변경할 수 있습니다.

코드 예제

const Text = styled.p`
  font-size: 16px;
  color: #333;
  line-height: 1.6;
`;

const App = () => (
  <>
    <Text>일반 단락</Text>
    <Text as="h1">제목으로 렌더링</Text>
  </>
);

설명

as prop에 다른 HTML 태그나 컴포넌트를 전달하면, 동일한 스타일을 유지하면서 의미론적으로 올바른 마크업을 사용할 수 있습니다.

---

12. CSS_변수와_함께_사용

개요

CSS 커스텀 속성(변수)을 Emotion과 함께 사용하여 런타임에 스타일을 동적으로 변경할 수 있습니다.

코드 예제

const Box = styled.div<{ size: number }>`
  --box-size: ${props => props.size}px;

  width: var(--box-size);
  height: var(--box-size);
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
`;

설명

CSS 변수를 props로 정의하고 var() 함수로 참조하면, JavaScript와 CSS의 장점을 모두 활용하여 유연한 스타일링이 가능합니다. ``` Emotion의 핵심 개념 12가지를 실전 예제와 함께 정리했습니다. 각 개념은 실제로 작동하는 코드로 구성되어 있으며, 기본 사용법부터 고급 패턴까지 단계적으로 학습할 수 있도록 구성했습니다.

---

마치며

이번 글에서는 Emotion CSS-in-JS 스타일링 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#React #Emotion #CSS-in-JS #Styling #StyledComponents