css-in-js 대표적인 'styled-components' VS 'emotion' 비교

css-in-js는 쉽게 말해 css코드가 자바스크립트 안에서 관리되기 때문에 공통되는 css 코드를 변수로 관리할 수 있다. 또한 동적으로 css 코드를 작성하기에도 쉽다. 요즘 css-in-js를 지원하는 패키지가 많이 나오기도 했고 문법도 다양해졌다. css-in-js를 지원하는 패키지 중에서 가장 유명한 것은 바로 styled-components이다.

styled-components

https://styled-components.com/

터미널에서 패키지 설치해주기

$npm install styled-components

import styled from 'styled-components';

const BoxCommon = styled.div`
	hieght: 50px;
    background-color: #fff;
    `;
const BoxBig = styled.div`
	width:24px;
    `;
const BoxSmall = styled(BoxCommon)`
	width:100px;
    `;
    
function Box({size}) {
  if(size === 'big') {
 return <BoxBig>큰 박스</BoxBig>
  } else {
   return <BoxSmall>작은 박스</BoxSmall>
  }
 }
 export default Box;

공통 CSS 코드를 담고 있는 스타일 컴포넌트를 만들었다. 클래스 상속처럼 이전에 만든 BoxCommon 컴포넌트를 확장해서 새로운 스타일드컴포넌트를 만들 수 있다.

(...)

const BoxCommon = styled.div`
 width: ${props=>(props.isBig?200:100)}px;
 height: 50px;
 background-color:#aaa;
`;

function Box({size}) {
 const isBig = size === 'big';
 const label = isBig ? '큰 박스' : '작은 박스';
 return <BoxCommon isBig={isBig}>{label}</BoxCommon>
 }
export default Box;

이 방법은 스타일 컴포넌트 만들 때 사용된 문법은 ES6에 추가된 태그된 템플릿 리터럴 문법이다. 템플릿 리터럴에서 표현식을 사용하면 컴포넌트의 속성값을 매개변수로 갖는 함수를 작성할 수 있다. 동적으로 스타일을 변경하기 때문에 스타일드 컴포넌트 컴포넌트는 하나로 충분하다. isBig 속성값은 스타일 컴포넌트 컴포넌트의 표현식에서 사용된다.

그리고 요즘 styled-components에서 emotion으로 많이 넘어가고 있는 추세라는데,,,

https://emotion.sh/docs/introduction

터미널에서 패키지 설치해주기

$npm install --save @emotion/styled

일반적으로 Emotion은 다른 라이브러리보다 개발자 친화적이라고 한다. Emotion의 가장 큰 장점은 CSS 작성을 위해 쉽게 처리 할 수있는 개체 스타일. 예를 들어, 개발자가 동일한 이름 지정 스타일을 피하면서 서로 다른 구성 요소에 대해 고유 한 이름을 만들어야하는 스타일 구성 요소의 경우를 생각해보자. 고유 한 스타일을 따르지 않거나 의미있는 설명없이 구성 요소의 이름을 지정하면 모든 노력이 몇 초 만에 낭비 될 수 있다. 반면에 이름 지정 작업은 CSS props의 적용에 의존하기 때문에 Emotion에서 매우 간단하다.

마지막으로, 많은 개발자들은 작은 크기, 고성능 및 전반적인 유연성 때문에 다른 CSS-in-JS 대안 보다 Emotion을 선호한다.

결론

간단하고 효율적이며 복잡하지 않은 스타일링을 위해 Emotion은 훌륭한 CSS-to-JS 라이브러리다. 반면에 더 독특하고 복잡한 스타일 옵션의 경우 styled-components 가 더 나은 방법 일 수 있다. CSS 작성의 경우와 마찬가지로 의사 결정 과정의 대부분은 프로젝트 설정 및 개인 취향에 달려 있다. 또 추가적으로 Emotion의 좋은 점이라면 Emotion과 styled-components 는 성능 및 번들 크기와 관련하여 눈에 띄는 차이가 거의 없었지만 Emotion.js이 2kb 더 작았다고 함

출처

https://blog.logrocket.com/styled-components-vs-emotion-for-handling-css/