Emotion 최신 기능 소개 스타일링

Emotion의 최신 기능들을 살펴봅니다. CSS-in-JS의 강력한 기능인 동적 스타일링, 테마 시스템, 그리고 성능 최적화 기법을 실전 코드와 함께 알아봅니다.

---

---

들어가며

이 글에서는 Emotion 최신 기능 소개 스타일링에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. css_prop_기본_사용법
2. styled_컴포넌트_생성
3. ThemeProvider_활용
4. 동적_스타일_객체
5. Composition_스타일_조합
6. Global_스타일_설정
7. keyframes_애니메이션
8. 미디어_쿼리_반응형
9. label_디버깅_지원
10. 조건부_스타일_패턴

---

1. css prop 기본 사용법

개요

Emotion의 css prop을 사용하여 컴포넌트에 직접 스타일을 적용하는 방법입니다. TypeScript와 함께 사용하면 타입 안정성도 확보할 수 있습니다.

코드 예제

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

const Button = () => (
  <button css={css`
    background: #3b82f6;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    &:hover { background: #2563eb; }
  `}>
    클릭하세요
  </button>
);

설명

css prop을 사용하면 컴포넌트에 직접 스타일을 작성할 수 있으며, 호버 효과 같은 의사 클래스도 간편하게 적용됩니다.

---

2. styled 컴포넌트 생성

개요

styled API로 재사용 가능한 스타일 컴포넌트를 만들 수 있습니다. Props를 받아 동적으로 스타일을 변경할 수 있어 유연합니다.

코드 예제

import styled from '@emotion/styled';

interface CardProps {
  variant?: 'primary' | 'secondary';
}

const Card = styled.div<CardProps>`
  padding: 20px;
  border-radius: 12px;
  background: ${props =>
    props.variant === 'primary' ? '#3b82f6' : '#e5e7eb'};
  color: ${props =>
    props.variant === 'primary' ? 'white' : '#1f2937'};
`;

설명

Props 기반으로 스타일을 동적으로 변경하여 다양한 UI 변형을 하나의 컴포넌트로 처리할 수 있습니다.

---

3. ThemeProvider 활용

개요

ThemeProvider를 사용하면 전역 테마를 설정하고 모든 컴포넌트에서 일관된 디자인 시스템을 적용할 수 있습니다.

코드 예제

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

const theme = {
  colors: { primary: '#3b82f6', text: '#1f2937' },
  spacing: { sm: '8px', md: '16px', lg: '24px' }
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Button css={css`
      color: ${theme.colors.primary};
      padding: ${theme.spacing.md};
    `} />
  </ThemeProvider>
);

설명

테마 객체를 정의하여 색상, 간격 등을 일관되게 관리하고 재사용할 수 있습니다.

---

4. 동적 스타일 객체

개요

JavaScript 객체 형식으로 스타일을 정의하면 조건부 로직을 더 쉽게 작성할 수 있습니다.

코드 예제

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

const getDynamicStyle = (isActive: boolean) => css({
  display: 'flex',
  alignItems: 'center',
  backgroundColor: isActive ? '#10b981' : '#6b7280',
  padding: '12px 20px',
  transition: 'all 0.3s ease',
  transform: isActive ? 'scale(1.05)' : 'scale(1)'
});

const Badge = ({ active }: { active: boolean }) => (
  <div css={getDynamicStyle(active)}>상태 배지</div>
);

설명

객체 스타일 방식을 사용하면 복잡한 조건부 스타일링을 JavaScript 로직으로 깔끔하게 처리할 수 있습니다.

---

5. Composition 스타일 조합

개요

여러 스타일을 배열로 조합하여 재사용성을 높이고 스타일을 모듈화할 수 있습니다.

코드 예제

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

const baseStyle = css`
  padding: 10px;
  border-radius: 4px;
`;

const primaryStyle = css`
  background: #3b82f6;
  color: white;
`;

const Component = () => (
  <div css={[baseStyle, primaryStyle]}>
    조합된 스타일
  </div>
);

설명

공통 스타일과 특정 스타일을 분리하여 조합하면 코드 재사용성이 높아지고 유지보수가 쉬워집니다.

---

6. Global 스타일 설정

개요

Global 컴포넌트로 전역 CSS를 설정하여 리셋 스타일이나 기본 폰트 등을 적용할 수 있습니다.

코드 예제

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

const globalStyles = css`
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Pretendard', sans-serif;
    line-height: 1.6;
    color: #1f2937;
  }
`;

const App = () => (
  <>
    <Global styles={globalStyles} />
    <div>앱 콘텐츠</div>
  </>
);

설명

전역 스타일을 한 곳에서 관리하여 일관된 기본 스타일을 모든 페이지에 적용할 수 있습니다.

---

7. keyframes 애니메이션

개요

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

코드 예제

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

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

const AnimatedBox = () => (
  <div css={css`
    animation: ${fadeIn} 0.6s ease-out;
    padding: 20px;
    background: #f3f4f6;
  `}>
    애니메이션 박스
  </div>
);

설명

keyframes로 커스텀 애니메이션을 만들어 컴포넌트에 부드러운 전환 효과를 추가할 수 있습니다.

---

8. 미디어 쿼리 반응형

개요

반응형 디자인을 위한 미디어 쿼리를 Emotion 스타일 내에서 직접 작성할 수 있습니다.

코드 예제

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

const responsiveGrid = css`
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
`;

설명

미디어 쿼리를 스타일 안에 포함시켜 화면 크기에 따라 레이아웃을 자동으로 조정할 수 있습니다.

---

9. label 디버깅 지원

개요

label 속성을 사용하면 DevTools에서 스타일을 쉽게 식별하고 디버깅할 수 있습니다.

코드 예제

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

const buttonStyle = css`
  label: custom-button;
  background: #8b5cf6;
  padding: 10px 20px;
  border-radius: 6px;
  color: white;
  cursor: pointer;
`;

const CustomButton = () => (
  <button css={buttonStyle}>버튼</button>
);

설명

label을 추가하면 브라우저 개발자 도구에서 생성된 클래스명에 레이블이 포함되어 디버깅이 편리해집니다.

---

10. 조건부 스타일 패턴

개요

여러 조건에 따라 다른 스타일을 적용하는 실용적인 패턴입니다.

코드 예제

import styled from '@emotion/styled';

interface AlertProps {
  type: 'success' | 'warning' | 'error';
}

const Alert = styled.div<AlertProps>`
  padding: 16px;
  border-radius: 8px;
  background: ${({ type }) => ({
    success: '#d1fae5',
    warning: '#fef3c7',
    error: '#fee2e2'
  }[type])};
  color: ${({ type }) => ({
    success: '#065f46',
    warning: '#92400e',
    error: '#991b1b'
  }[type])};
`;

설명

객체 매핑을 활용하여 여러 상태에 따른 스타일을 간결하고 타입 안전하게 관리할 수 있습니다.

---

마치며

이번 글에서는 Emotion 최신 기능 소개 스타일링에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

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