2022/12/19 - Styled Components vs Emotion

react-wai에서는 Styled components, allWAIs에서는 Emotion을 사용했다. 컴포넌트를 react-wai에 있는 스토리북을 사용해서 만들어도 됬지만.. react-wai를 만들면서 컴포넌트를 구현을 빠르게 하다보니 emotion을 이용하여 컴포는트를 만들고 라이브러리에 컴포넌트를 올렸더니 문제가 생겼다.

1. Cascading?

 

의도치 않던 cascading이 일어났다.  혹시 테스팅이 적어서 확인을 못했나? 라고 생각해서 다시 emotion으로 실행해봤다.

 

 

이 둘의 css를 비교하면서 알게 된 것은, 여기서 재사용성이라는 것은 일반적으로 css가 작동하는 방식처럼 변수가 바뀌어도 이전에 있던 값들이 영향을 미친다. 즉, styled-components는 css와 비슷하게 작동한다.(같은 컴포넌트 이름을 가지고 같은 조건이면 같은 css가 적용된다) 하지만, emotion같은 경우에는 값을 재사용하지 않기 떄문에 props가 변경되면 값을 재활용하지 않고 새로운 css 를 적용하였다.

2. 선택

컴포넌트를 제공하는 라이브러리에서 css를 개발자가 다시 고려하게 만드는 것은 DX를 떨어뜨리는 것이라고 생각하기 때문에, styled components보다는 emotion으로 사용하는게 낫다고 생각이 들어서 팀원들에게 전달하고 수정하였다.