팀 프로젝트를 진행하며 프로젝트 스타일링 방법을 선택하기전 각각의 장점과 단점을 찾아보았다. 이것말고도 더 많은 장단점이 있지만 선택에 중요한 판단이 되고 공감가능한 장단점을 위주로 찾아보았다.
⇒ 유지보수의 측면에서도, 협업의 측면에서도 단점이 명확함
⇒ 프로젝트 성능에는 영향을 미치지만 TS와 연결을 자동으로 해준다는 점, 협업을 할 때 따로 명명 규칙을 정하지 않아도 되는점, 스타일이 컴포넌트에 종속되어있다는 점, 동적 스타일링이 가능한 점이 장점이다.
⇒ CSS-in-JS와 장점은 비슷하지만 전역적으로 스타일을 할 때 어렵다는 점, TS로 작업하려면 추가로 손봐야한다는점이 단점이다.
우리 팀의 선택은 CSS-in-JS이다. 프로젝트를 하면서 3명이 일관성있게 코드를 짜기위해 이미 여러 컨벤션이 있는데 class 이름까지 신경쓰는 것은 낭비라 생각했다. 또한 우리 프로젝트는 TypeScript를 적용하기 때문에 따로 설정을 하지 않아도 되는 점이 매력적이었다. 동적 스타일링도 선택의 이유였다. 우리는 사용자가 여러 팀에 속해있을 때 팀별로 색을 다 다르게 보여주기 위해서 동적으로 스타일링이 되어야만 했다.
물론 프로젝트 성능저하라는 단점이 있지만 현재 단계에서는 큰 프로젝트가 아니기 때문에 그정도는 감수할 수 있다고 생각했다.
라이브러리중에는 styled components를 선택했다.
성능면에서는 emotion이 조금 더 가볍고 빠르다. 하지만 큰 차이가 없는데 파일마다 pragma line을 추가해야하는 것은 불필요한 시간낭비라고 생각했다.(까먹을 수도 있으니 말이다). 또한 이모션의 가장 큰 장점이라고 생각하는 서버 사이드 렌더링 관련해서 우리는 필요없을 것이라고 판단했기 때문이다.