emotion과 styled-components

공통점

둘 다 CSS-in-JS 라이브러리로서, JavaScript 코드 안에서 CSS 스타일을 작성할 수 있다.

 

차이점

//styled-component
const Button = styled.button`
  color: red;
  background-color: white;
`;

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

const Button = styled.button`
  ${css`
    color: red;
    background-color: white;
  `}
`;

css 클래스 이름

styled-components

- 자동으로 고유한 CSS 클래스 이름을 생성한다. 이를 통해 클래스 이름 충돌을 방지할 수 있다.

- CSS 문법을 따른다.

emotion

- 컴파일된 CSS 클래스 이름을 제공하는다. 대신, 클래스 이름을 지정할 수 있도록 className 속성을 제공합니다.

- CSS 문법을 확장하여 JavaScript 문법을 사용할 수 있다. 이를 통해, JavaScript 변수나 함수를 사용하여 동적인 스타일링을 구현할 수 있다.

 

 

emotion 의 장점

1. JavaScript와 CSS의 통합: emotion은 JavaScript 안에서 CSS를 작성할 수 있도록 해준다. 이를 통해, JavaScript 변수나 함수를 사용하여 동적으로 스타일링할 수 있다. 이는 코드의 가독성과 유지보수성을 높여준다.
2. CSS-in-JS의 성능: emotion은 스타일링된 컴포넌트를 만들기 위해 고유한 클래스 이름을 생성한다. 이를 통해, 스타일링된 컴포넌트의 스타일이 변경될 때마다 새로운 CSS를 생성하는 것이 아니라, 기존에 생성된 CSS를 재사용할 수 있습니다. 이는 CSS-in-JS 라이브러리의 성능을 높여준다.
3. CSS 모듈과 비교할 때 간편함: CSS 모듈은 CSS 파일과 JavaScript 파일을 분리해야 하기 때문에 번거로울 수 있다. 하지만 emotion은 JavaScript 파일 안에서 CSS를 작성할 수 있기 때문에, 코드의 관리가 용이하다.
4. 강력한 타입 시스템: emotion은 TypeScript와 같은 타입 시스템을 지원합니다. 이를 통해, 스타일링된 컴포넌트의 타입을 명확하게 정의할 수 있다.
5. React Native와의 호환성: emotion은 React Native와도 호환된다. 이를 통해, React 코드를 Native 앱으로 쉽게 전환할 수 있다.

 

styled-components의 장점

1. 컴포넌트 기반 스타일링: styled-components는 CSS를 컴포넌트에 직접 적용하기 때문에, 컴포넌트 단위로 스타일을 관리할 수 있다. 이렇게 하면 스타일 충돌 문제를 방지하고, 유지 보수 및 확장성을 향상시킬 수 있다.
2. 재사용 가능한 스타일: styled-components는 스타일을 컴포넌트 단위로 정의하기 때문에, 재사용 가능한 스타일을 쉽게 생성할 수 있다. 예를 들어, Button 컴포넌트에 스타일을 적용하면, 이 스타일을 다른 컴포넌트에서도 재사용할 수 있다.
3. 동적 스타일링: styled-components는 자바스크립트를 사용하여 스타일을 생성하기 때문에, 동적 스타일링에 유용하다. 예를 들어, 프로퍼티 값을 변경하거나 조건부로 스타일을 적용할 수 있다.
4. CSS-in-JS: styled-components는 CSS-in-JS 패턴을 따르기 때문에, CSS의 일부 단점을 극복할 수 있다. 예를 들어, 스타일 충돌, 클래스 이름 충돌, 스타일의 우선순위 등의 문제를 해결할 수 있다.
5. 다양한 CSS 기능: styled-components는 CSS의 다양한 기능을 지원한다. 예를 들어, 미디어 쿼리, 애니메이션, 그리드 레이아웃, 서드파티 라이브러리와의 통합 등을 지원한다.