[CSS-in-JS] 이모션(Emotion) 라이브러리 소개

Emotion이란 무엇인가요?

Emotion은 JavaScript에서 CSS를 작성할 수 있는 인기 있는 라이브러리입니다. 이를 통해 표준 CSS와 동적 JavaScript 기능을 결합하여 React 컴포넌트를 스타일링할 수 있습니다. 다음은 Emotion의 주요 기능과 장점입니다:

1. Styled Components:

• styled를 사용하여 MainImg, MainTitle, SubTitle과 같은 재사용 가능한 스타일드 컴포넌트를 만들 수 있습니다.
• 이러한 컴포넌트는 스타일을 실제로 적용하는 요소와 함께 캡슐화하여, 더 나은 조직과 유지 관리를 제공합니다.

2. 동적 스타일링:

• JavaScript 로직을 스타일에 사용할 수 있으므로, props를 전달하고 컴포넌트의 상태에 따라 스타일을 조건부로 적용할 수 있습니다.
• 예시: 
• const Button = styled.button` background: ${(props) => (props.primary ? 'blue' : 'gray')}; `;

3. 범위 지정된 스타일:

• Emotion으로 생성된 스타일은 해당 컴포넌트에만 적용됩니다. 이는 스타일이 다른 부분에 실수로 영향을 미치는 것을 방지하여 CSS 충돌을 줄입니다.

4. CSS Prop:

• styled 컴포넌트 외에도 Emotion은 css prop을 JSX에서 직접 사용할 수 있게 하여, 인라인 스타일을 작성하면서도 완전한 CSS 기능을 유지할 수 있습니다.

  <div css={{ color: 'hotpink' }}>Emotion으로 스타일 적용</div>

5. 서버 사이드 렌더링(SSR):

• Emotion은 서버 사이드 렌더링에 대한 내장 지원을 제공하여, Next.js와 같은 초기 페이지 로드 성능이 중요한 애플리케이션에 적합합니다.

6. 가볍고 성능이 뛰어남:

• Emotion은 가볍고 빠르게 설계되어, 애플리케이션의 번들 크기와 성능에 최소한의 오버헤드를 추가합니다.

7. CSS Keyframes 및 애니메이션:

• Emotion은 keyframes 및 애니메이션을 지원합니다:

  import { keyframes } from '@emotion/react';
  const fadeIn = keyframes`
    from { opacity: 0; }
    to { opacity: 1; }
  `;

8. 테마 지원:

• Emotion은 테마를 지원하여, 색상, 폰트, 브레이크포인트 등의 디자인 토큰을 만들고 이를 애플리케이션 전체에 걸쳐 적용할 수 있습니다.

결론적으로, Emotion은 React 애플리케이션을 스타일링할 수 있는 강력하고 유연하며 현대적인 방법을 제공하며, 동적이고 범위 지정된 성능 좋은 스타일을 쉽게 만들 수 있게 해줍니다.

Styled Components와는 어떻게 다른가요?

Emotion과 Styled Components는 별도의 라이브러리지만, 많은 유사점을 공유합니다. 다음은 이 두 라이브러리의 비교 및 차이점입니다:

유사점:

1. CSS-in-JS:
   두 라이브러리 모두 JavaScript 파일 내에서 CSS를 직접 작성할 수 있는 CSS-in-JS 라이브러리입니다.
2. Styled API:
   두 라이브러리 모두 styled API를 사용하여 스타일드 컴포넌트를 생성합니다. 예를 들어, Emotion과 Styled Components 모두에서 다음과 같이 컴포넌트를 만들 수 있습니다:
3. const Button = styled.button` background: blue; color: white; `;
4. 동적 스타일링:
   두 라이브러리 모두 props나 JavaScript 로직을 사용하여 동적으로 스타일링할 수 있습니다. 컴포넌트에 props를 전달하여 조건부로 스타일을 적용할 수 있습니다.
5. 범위 지정된 스타일:
   두 라이브러리 모두 컴포넌트에 스타일을 지정하여, 스타일이 다른 컴포넌트에 유출되는 것을 방지합니다.
6. 서버 사이드 렌더링(SSR):
   두 라이브러리 모두 서버 사이드 렌더링을 지원하여, Next.js 같은 프레임워크에 적합합니다.

차이점:

1. 라이브러리 크기:
   • Emotion은 일반적으로 Styled Components보다 가볍습니다. 모듈화된 접근 방식을 제공하여 필요한 부분만 가져올 수 있어 성능과 번들 크기 관리에 도움이 됩니다.
   • Styled Components는 모든 기능을 하나의 패키지로 제공하므로 약간 더 무겁습니다.
2. 유연성:
   • Emotion은 사용 방식에 있어서 더 유연합니다. styled API뿐만 아니라 css prop을 사용할 수 있습니다. Styled Components에서는 이러한 기능을 기본적으로 제공하지 않습니다.
   • 또한, Emotion의 @emotion/css 패키지를 사용하여 컴포넌트를 만들지 않고도 스타일을 적용할 수 있어, 다양한 사용 사례에 더 유연하게 대응할 수 있습니다.
3. 테마 지원:
   • 두 라이브러리 모두 테마를 지원하지만, Emotion의 테마 시스템은 더 넓은 범위에서 사용 가능하며 확장 및 커스터마이징이 더 용이합니다.
4. Babel 플러그인 (Emotion에서 선택 사항):
   • Styled Components는 Babel 플러그인에 의존하여 성능을 최적화하고 태그 템플릿 리터럴을 변환합니다.
   • Emotion은 Babel 플러그인을 제공하지만 선택 사항입니다. 플러그인이 없어도 Emotion은 성능이 좋고, 대부분의 기능이 별다른 설정 없이 사용할 수 있습니다.
5. CSS Prop:
   • Emotion은 css prop을 제공하여 스타일드 컴포넌트를 만들지 않고도 JSX 요소에 직접 스타일을 적용할 수 있습니다. Styled Components는 이와 동등한 기능이 없습니다.

     <div css={{ color: 'hotpink' }}>Hello</div>

     이러한 기능은 특히 빠른, 일회성 스타일이 필요한 경우에 더 유용합니다.

무엇을 선택해야 할까요?

• Styled Components는 단순함과 사용의 용이성으로 잘 알려져 있어, 강력하고 직관적인 솔루션을 원하는 개발자에게 적합합니다.
• Emotion은 더 많은 유연성과 모듈성을 제공하므로, 성능, 번들 크기, 그리고 다양한 CSS-in-JS 패러다임(css 또는 styled)을 활용하고 싶은 개발자에게 적합합니다.

결론적으로, Emotion과 Styled Components는 많은 기능을 공유하지만, 서로 다른 라이브러리입니다. Emotion은 더 유연하고 가벼운 반면, Styled Components는 더 의견이 명확하고 일체형 솔루션입니다.