아무도 보여주고 싶지 않은 첫 프로젝트에서 styled-components를 사용했다가, CSS-in-JS는 현업에서 선호하지 않는다는 말을 듣고, DM으로 물어봤다가 장문의 답장을 받은 이후 강박적으로 styled-components는 사용하지 않았다. 그러다가 chakra UI 같은 UI 컴포넌트 라이브러리를 사용하면 편하다는 말을 듣고 프로젝트에 도입해 사용하고 있었다. 하지만 사용하면 할수록 styled-components보다 느리겠다는 생각을 하게 되었다. 그리고 생각해보면 이것도 CSS-in-JS 아닌가 싶었다. 그리고 해커톤에서 다른 레포를 살펴보면 거의 styled-components를 사용하고 계셨다. 울면서 styled-components 떠나보냈는데 다시 품 안으로 데려와야하나싶다.
CSS-in-CSS
CSS Module
CSS 모듈은 CSS 파일을 CSS Modules Compiler를 통해 모듈화하여 사용하는 방식
CSS 클래스를 만들면 자동으로 고유한 클래스네임을 만들어서 해당 클래스명의 scope를 지역적으로 제한
따라서 CSS 모듈은 한 프로젝트 소스 안에 CSS 클래스 네임이 중복되더라도 각각 고유한 클래스명으로 구별되기 때문에 중복 및 관리의 위험성이 적고 CSS 네이밍이 간소화
But CSS 파일을 만들어 관리해야함
CSS Preprocessor
자신만의 문법을 가지고 CSS를 생성하는 프로그램
CSS의 문제점을 프로그램 방식인 변수, 함수, 상속 등 일반적인 프로그래밍 개념을 사용하여 보완
CSS 전처리기에는 Sass, Less, Stylus 등 다양한 모듈이 존재
- 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있는 재사용성
- 임의 함수 및 내장 함수로 인해 개발 시간과 비용 절약
- 중첩과 상속을 통한 구조화된 코드유지 및 관리 용이
그러나 전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요됨
CSS-in-JS
자바스크립트 코드에서 CSS를 작성하는 방식
- Christoper Chedeau aka Vjeux의 CSS를 작성하는 어려움
- Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
- Dependencies: CSS 간의 의존 관계를 관리
- Dead Code Elimination: 미사용 코드 검출
- Minification: 클래스 이름의 최소화
- Sharing Constants: JS와 CSS의 상태 공유
- Non-deterministic Resolution: CSS 로드 우선 순위 이슈
- Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈
Styled Components
CSS-in-JS 스타일링을 위한 프레임워크
자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공
- CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성
- JavaScript와 CSS 사이의 상수와 함수를 공유
- 현재 사용 중인 스타일만 DOM에 포함
- 짧은 길이의 유니크한 클래스를 자동으로 생성하는 코드 경량화
CSS-in-JS와 CSS-in-CSS 성능 비교
CSS Modeule
CSS Preprocessor
Styled components
Chackra UI
개발자 도구 성능 탭 알게 써보겠다고 신난 나 자신
미미하지만 차이가 나긴 난다..!
이 지점에서 예전에 장문의 답장 정리했던거 다시 봤는데 뭔가 추억이다. 코치님은 다 정답을 말해줬지만 나혼자 styled-components는 안된다고 단편적으로 받아들인 두달차 개발자시다.
