css-in-js
- 자바스크립트로 CSS를 작성하는 방식
- 스타일을 컴포넌트에 직접 연결
- 클래스 이름 충돌 및 특정성 문제 해결
- Styled Components, Emotions 등
css-in-css
- css 모듈
- css 클래스를 만들면 자동으로 고유한 클래스네임을 만들어 스코프를 지역적으로 제한
- 클래스 이름이 중복되어도 새로운 이름이 입혀져 중복 및 관리의 위험성이 적고 네이밍 규칙이 간소화 됨
- 많은 css 파일 생성 및 관리 필요
- css 전처리기
- 특별한 구문을 가지고 css를 생성하는 프로그램
- 변수, 함수, 상속 등을 사용하여 보완
- 재사용성, 개발 시간과 비용 절약, 구조화된 코드 유지 및 관리 용이
- 전처리기를 위한 도구 필요 및 다시 컴파일 시 시간이 소요됨
- Sass, Less, Stylus 등
- css frameworks
- 프레임워크 내 구현된 컴포넌트를 이용하면 개발 시간
- 개발자 간 일관된 코딩 스타일 유지
- bootstrap, tailwindcss, material ui
Styled Components vs tailwind
둘 중에 뭘 쓸까 계속해서 고민되는 부분. 개인적으로는 거의 취향차이라고 느껴진다. 나는 주로 Styled Components를 써왔어서 최근에 시도했던 플젝에서 tailwind를 사용해보았을 때 왠지 모를 불편함이 느껴졌다. 같은 스타일을 사용할 때 어떻게 재사용할 것이며, 상태에 따라 분기처리할 때는 어떻게 해야하는지, 못생긴 컴포넌트(태그에 여러 클래스명의 나열) 등이 걱정이 되었는데, 생각보다 금방 적응할 수 있었다. 못생긴 컴포넌트는 아직도 적응이 안 된다. 다만 어려웠던 점은 클래스명이 익숙지 않다는 것. 계속해서 공식문서를 왔다갔다하면서 작업해야했던 점이 불편했다. 러닝커브면에서는 개인적으로 Styled Components가 더 나은 거 같다.
SSR환경에서 Styled Component의 경우 렌더링 된 이후에 스타일이 적용되어 사용자에게 스타일링 되지 않은 화면이 먼저 노출되는 이슈(확인해본 결과 Next에서는 해결방법 있음)가 있고, tailwind의 경우 자바스크립트 변수 값에 따라 동적으로 스타일링 하는 것이 어려운 이슈가 있다. 이외에도 여러 장단점들이 있겠으나, 이게 낫다 저게 낫다 딱 결정내릴 수 있는 부분은 아니고, 본인이 하는 프로젝트에 맞는 스택을 이용하는 게 좋을 거 같다.