Emotion vs Styled-components

many developers prefer Emotion to other CSS-in-JS alternatives because of its small size, high performance, and overall flexibility.

→ Emotion 장점 : 1. 파일크기가 작다, 2. 고성능, 전반적인 유연성. 개발자친화적.

문법이 비슷한거같은데, 살짝 다른거같다

Emotion은 string style작성법과 object style 작성법이 있다.

→ 차이점은


string 스타일은 
태그안에 css={css`background:'black'; &:hover {color:'white'};`}


object스타일은 
태그안에 css={{ background: 'black' , '$:hover': {color:'white'} }}

보통 props로 관리할 변수는 직접 선언 및 할당을 해주고


const color = 'white'

<div css={css`border:solid; background: black; &:hover { color:${color};}`} >안녕하세요</div>