[Emotion] CSS-in-JS로 스타일링의 새로운 패러다임 🎨

Emotion 라이브러리 톺아보기! 🎨

Emotion은 React와 함께 사용할 수 있는 강력한 CSS-in-JS 라이브러리입니다. 스타일링을 위한 유연성과 퍼포먼스를 제공하며, 직관적인 API 덕분에 빠르게 배울 수 있습니다. 이번 글에서는 Emotion의 핵심 기능, 장점, 그리고 실전 예제까지 다뤄보겠습니다.

---

Emotion이란? 🤔

Emotion은 CSS-in-JS 접근 방식을 지원하는 라이브러리로, JavaScript 파일 내에서 스타일을 작성하고 관리할 수 있게 해줍니다. 기존의 CSS, SCSS 파일을 작성하고 관리하던 방식에서 탈피해, 동적 스타일링과 모듈화된 컴포넌트 스타일링을 쉽게 할 수 있습니다.

---

Emotion의 주요 기능 📚

1. CSS 정의: CSS를 JavaScript 코드에서 CSS를 작성 및 관리
2. 스타일드 컴포넌트: 기존 CSS-in-JS 라이브러리인 styled-components와 유사한 API(컴포넌트별 스타일 정의)를 지원
3. 동적 스타일링: 상태, props, 테마 등을 기반으로 스타일을 동적으로 설정
4. 경량화된 스타일링: 필요한 스타일만 최소한으로 컴파일하여 런타임 성능 향상
5. 유연성: Vanilla JavaScript, React 등 다양한 환경에서 사용 가능

---

설치 방법 🛠️

Emotion은 다음 두 가지 주요 패키지를 제공합니다:

1. @emotion/react: React와 함께 사용
2. @emotion/styled: 스타일드 컴포넌트를 위한 API 제공

설치 명령어

# React와 함께 사용하기 위한 기본 패키지 설치
npm install @emotion/react @emotion/styled

---

사용 방법 ✨

1️⃣  기본 CSS 작성 및 적용

Emotion은 css 헬퍼를 통해 스타일을 정의하고 적용할 수 있습니다.

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

const style = css`
  color: hotpink;
  font-size: 20px;
`;

function App() {
  return <div css={style}>Hello, Emotion!</div>;
}

export default App;

 

2️⃣ 스타일드 컴포넌트 사용하기

Emotion은 styled API를 제공하여, 스타일과 컴포넌트를 하나의 단위로 묶을 수 있습니다.

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: hotpink;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    background-color: deeppink;
  }
`;

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

export default App;

 

3️⃣ 동적 스타일 적용하기

props나 상태를 기반으로 조건부 스타일을 정의할 수 있습니다.

import styled from '@emotion/styled';

const Box = styled.div`
  background-color: ${props => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 20px;
  text-align: center;
`;

function App() {
  return (
    <>
      <Box primary>Primary Box</Box>
      <Box>Default Box</Box>
    </>
  );
}

export default App;

---

Emotion의 주요 장점 🌟

1. 퍼포먼스 최적화: 필요한 CSS만 생성하여 렌더링 성능 향상
2. 모듈화된 스타일링: 컴포넌트 단위 스타일링으로 코드 가독성과 유지보수성 향상
3. 테마 지원: ThemeProvider를 통해 애플리케이션 전체에서 일관된 스타일을 유지 가능
4. 강력한 동적 스타일링: 상태와 props를 기반으로 스타일을 동적으로 생성 가능
5. React와의 강력한 통합: React의 생태계와 완벽히 호환(React의 props와 상태와 자연스럽게 연계)

---

테마 사용하기 🎨

Emotion의 ThemeProvider를 사용하면 애플리케이션 전반에 걸쳐 일관된 스타일링을 적용할 수 있습니다!

 

테마 설정하기

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

const theme = {
  colors: {
    primary: 'hotpink',
    secondary: 'gray',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  );
}

 

테마 활용하기

import styled from '@emotion/styled';

const Box = styled.div`
  background-color: ${props => props.theme.colors.primary};
  padding: ${props => props.theme.spacing.medium};
  color: white;
  text-align: center;
`;

function MyComponent() {
  return <Box>Themed Box</Box>;
}

---

실무에서의 Emotion 활용 팁 💡

1. 컴포넌트별 스타일 분리: 각 컴포넌트에 맞는 스타일을 정의해 유지보수성을 높이기!
2. 테마 사용: ThemeProvider를 사용해 전체 스타일을 일관되게 유지!
3. CSS 모듈과 병행 사용
   • 프로젝트의 요구에 따라 CSS 모듈과 함께 사용하면 더욱 유연합니다.
4. 동적 스타일링 최적화
   • 복잡한 동적 스타일은 함수로 분리해 재사용성을 높이세용

---

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

특징	Emotion	Styled-components	Vanilla CSS
성능 최적화	✅	✅	❌
동적 스타일링	✅	✅	❌
테마 지원	✅	✅	❌
사용 용이성	✅	✅	✅
CSS 파일 필요	❌	❌	✅

 

Emotion은 성능과 사용성을 모두 고려한 CSS-in-JS 라이브러리로, 복잡한 스타일링 작업에 탁월한 선택이 됩니당

---

마무리: Emotion으로 스타일링의 경계를 넓히자! ✨

Emotion은 CSS와 JavaScript의 경계를 허물며, 더 나은 스타일링 경험을 제공합니다. CSS-in-JS 트렌드에 맞춰 빠르게 배워보세요! Emotion의 간결한 문법과 유연성 덕분에 개발과 디자인이 한층 더 재미있어질 겁니다. 🌟

 

🌷전설의 개발자가 되어봅시당! 🌷