지금껏 나는 테일윈드와 스타일드컴포넌트 두 개의 선택지 중에서 항상 스타일드 컴포넌트를 고집해왔다.
테일윈드를 사용했을 때의 편리함은 느꼈지만,
회사에서 Vue를 사용하면서 SFC(싱글 파일 컴포넌트)의 작성 방식과 스타일드 컴포넌트의 작성 방식이 js와 css가 분리된 형태여서 익숙했으며(역할이 분리가 되어 관리가 용이하다), 컴포넌트 방식으로써 재사용성 등이 매력적으로 다가왔기 때문이다.
이런 이유에서 리액트를 사용할 때 스타일드 컴포넌트를 사용해왔다.
그러던 중 이번 풋살 기록 웹사이트를 만들기에 앞서 이번에도 스타일드 컴포넌트를 사용할 것인가에 고민을 하던 중 테일윈드의 창시자의 아티클을 봐버렸다.
CSS에서 관심사의 분리를 시작으로 유틸리티 클래스를 활용한 테일윈드가 탄생한 배경 이야기다.
이미 수 년 전에 써진 17년도에 써진 글이지만 테일윈드가 탄생하게 된 플로우에 감탄했다.
평소 css를 작성함에 있어 스쳐지나갔던 고민들이 고스란히 있었다.
스타일을 목적에 맞게 분리해서 코드를 더욱 모듈화하고 재사용성을 높일 수 있도록 하는 유틸리티 클래스를 활용해서, 반복되는 패턴에서 사용되기 위함을 기반으로 만들어진 것을 느꼈다.
테일윈드가 재사용성이 떨어진다고 생각했던건 내 얕은 생각이었다.
그러던 중 스타일드 컴포넌트의 성능 이슈가 제기된 토론도 보게 되었다.
스타일드 컴포넌트 같은 CSS in Js 라이브러리 같은 경우 런타임에 스타일을 주입하게 되는데, 랜더링 중에 스타일이 새롭게 추가되면 브라우저가 스타일 규칙을 다시 게산, 재랜더링을 반복하면서 성능에 영향을 준다는 것이다.
반면에 테일윈드는 빌드 시점에 스타일을 처리하므로 런타임 성능에 문제가 없다.
이런 이유로 테일윈드를 사용하게 되었는데,
빠른 서비스가 목표였던 이번 프로젝트인 만큼 어느정도 러닝커브가 있는 테일윈드만을 사용할 수 는 없어서
일단 테일윈드와 스타일드 컴포넌트를 혼용하고, 천천히 테일윈드에 적응하면서 스타일드 컴포넌트를 걷어내려고 한다.
추후에 테일윈드에 익숙해지면 사용하면서 느낀 점도 적어봐야겠다
