🤔 스타일 선택이유 (Emotion)

🤔 왜 Emotion 인가?

• 새로운 css 라이브러리를 쓰기 보다는, 이미 알고 있는 라이브러리를 사용해서 러닝커브를 줄이고자 함
• styled-component와 emotion 안에서 선택하고자 했습니다.

1. 높은 다운로드 수

2022년 기준으로, @emotion/core와 @emotion/react의 다운로드 수를 합치면 styled-components보다 약 2배 더 많은 다운로드 수를 기록하고 있다. Emotion의 인기도와 신뢰성을 확인할 수 있었다 .

2. TypeScript 지원

Emotion은 자체적으로 TypeScript를 지원하여, 추가적인 모듈 설치 없이도 TypeScript와 함께 사용할 수 있다.

3. CSS 컴포넌트 스타일링

Emotion은 styled-components와 유사한 방식으로 CSS 컴포넌트를 만드는 스타일을 제공한다. 이를 통해 CSS와 JavaScript 코드를 완벽하게 분리할 수 있어 코드의 가독성과 유지보수성을 향상시킨다.

4.경량성

Emotion은 styled-components보다 더 가벼운 라이브러리이다. 이는 애플리케이션의 로딩 시간을 줄이고, 전반적인 성능을 개선하는 데 도움이 된다.

5.효율적인 코드 작성

Emotion은 전개 연산자, composition, CSS 변수 문법 등을 사용하여 CSS 코드를 더 효율적으로 작성할 수 있다. 이는 개발자의 편의성을 높이고, 코드의 재사용성을 증가시킨다.

6.바벨 플러그인 지원

Emotion은 @emotion/babel-plugin을 제공하여, 자동으로 라벨을 추가해준다. 이는 수동으로 라벨을 지정할 필요를 없애주어, 개발 과정을 단순화한다.