styled-components와 emotion에 대한 고찰

현재 근무 중인 곳에서 스타일 관련 라이브러리로 emotion을 사용하고 있다. (근데 또 styled-components도 일부 사용하고 있다.)

하지만 나는 이곳에 들어가기 전까지는 styled-components만 주로 사용했었기 때문에, 두 라이브러리의 차이점이 궁금했다. 

왜냐하면 코드 상 크게 다른 점이 보이지 않았기 때문이었다.

 

동료 분께 질문했을 때 돌아온 답은 "emotion이 좀 더 가벼워서요~" 였었다.

 

그렇지만 다른 회사들 채용 공고 페이지에 적혀 있는 것을 보면,

styled-component와 emotion을 각각 균등하게 사용하고 있는 것을 볼 수 있었다. 

 

그래서 이 둘이 도대체 뭐가 다른 건지에 대해 알아보았다.

 

---

스타일 기능 및 문법

우선 전반적인 스타일 기능은 크게 다르지 않다.

그리고 둘 다 Sass 문법을 사용한다.

※ Sass (Syntactically Awesome Style Sheets) 문법

   - css의 확장된 버전

   - 스타일시트 작성을 보다 간결하고 효율적으로 만들어주는 css 전처리기

   - 코드의 가독성과 재사용성을 높일 수 있음

   - 특징 : 변수, 중첩, 믹스인, 상속, 연산

 

 

용량

styled-components 용량 / emotion 용량

확실히 emotion이 가볍긴 한 듯 하다. (숫자로만 봤을 때)

그치만 나는 저정도의 용량 차이가 얼마나 유의미한지에 대한 정확한 정보가 없어서

용량만으로는 emotion을 사용해야 하는 이유를 잘 모르겠다.

styled-components가 용량이 더 큰 만큼 지원해주는 기능이 더 많은 걸까?

 

 

emotion의 특징

• css() 함수를 사용한다. (styled() 함수도 사용할 수 있다.)
• SSR에서 별도의 설정 없이 동작한다. 
• 빌드 타임에 스타일을 컴파일하여 일반적인 css 클래스로 변환한다.
• 초기 렌더링 속도를 향상시키지만, 스타일 변경 시 매번 클래스 이름이 다르게 생성되므로 스타일 캐싱이 제한적이다

 

styled-components의 특징

• styled() 함수를 사용한다. (css() 함수도 사용할 수 있다.)
• SSR에서 사용 시, 따로 serverstylesheet를 설정해줘야 한다.
• 런타임 시 스타일을 생성하기 때문에 초기 렌더링 속도가 상대적으로 느릴 수 있으나, 스타일이 한 번 생성되면 캐싱되고 재사용되기 때문에 성능에 큰 영향을 주지 않는다.
• 별도의 기능이 있다.
  • 테마 기능 : 컴포넌트의 스타일을 일관되게 관리
  • 컴포넌트 내부에서 props를 사용하여 동적으로 스타일 변경

 

---

 

위와 같은 내용들을 살펴보고 느낀 점은 

• 두 라이브러리 간 큰 차이점이 존재하지 않는다.
• 해당 팀에서 익숙한 것을 사용하면 될 것 같다.
  • Next.js와 같은 SSR을 사용하고 있는 곳에서는 emotion이 더 편할 것 같다.

 

 

---

참고한 글 

1. styled-components 과 emotion, 도대체 차이가 뭔가?

2. Emotion으로 React 컴포넌트 스타일하기

3. Emotion docs