emotion
emotion은 styled-components보다 조금 늦게 배포된 라이브러리다 보니 처음 구현할때 참조한 라이브러리에 styled-components도 포함되어있다.
현재 emotion과 styled-components 두 라이브러리는 거의 유사한 형태를 띄고 있다.
emotion과 styled-components 비교한 글에 따르면 지원하는 기능은 거의 유사하고
git repogitory star 수는 styled-components가 더 많지만 번들 size나 속도는 emotion이 더 퍼포먼스가 좋다.
npm trends로 비교해보아도 emotion이 우세한 것으로 확인된다.
emotion 설치하기
npm i @emotion/styled @emotion/react
전체적인 사용 방법도 styled-components와 비슷하다.
emotion의 css를 styled-components가 벤치마킹, styled-components의 styled를 emotion에서 벤치마킹했다.
emotion도 styled-components와 마찬가지로 uniq한 class명을 자동으로 명명해주기 때문에 코드의 재사용에 편리하다.
emotion도 css In JS지만 css 특징상 global하게 적용해야되는 부분이 있기 때문에 Global 하게 적용할수 있는 패키지를 제공한다.
수강료 100% 환급 챌린지 | 패스트캠퍼스
딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.
'ETC > 패캠환급챌린지(리액트)' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 25일차 - 리액트 UI라이브러리 (Onsen UI) (0) | 2021.11.25 |
|---|---|
| 패스트캠퍼스 챌린지 24일차 - 리액트 스타일링하기 Sass(Scss) (0) | 2021.11.24 |
| 패스트캠퍼스 챌린지 22일차 - 리액트 라이브러리 styled-component (2) (0) | 2021.11.22 |
| 패스트캠퍼스 챌린지 21일차 - 리액트 라이브러리 styled-component (1) (0) | 2021.11.21 |
| 패스트캠퍼스 챌린지 20일차 - 라이브러리 고르는 법 (0) | 2021.11.20 |