CSS 방법론의 공통 지향점
- 코드의 재사용
- 코드의 간결화(유지보수 용이)
- 코드의 확장성
- 코드의 예측성(클레스명 으로 의미 예측)
CSS-IN-JS에는 대표적으로 styled-component가 있다
장점으로는
- 컴포넌트 들의 스타일을 생성, 수정, 삭제가 자유롭다.(의존성이 낮고 응집성이 높다.)
- className의 충돌 등의 우려가 적어 협업과 유지보수가 쉽다.
- 기능적(function)혹은 상태를 가진 컴포넌트 들로 부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.
- styled-component는 react의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하게 되었다.
CCD(component-driven-development)
CCD가 트렌드 로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 component explorer(컴포넌트 탐색기)가 등장 하는데, 그 중 하나가 storybook이다.
storybook이란? UI개발 CCD를 하기 위한 도구이다.
- UI 라이브러리를 내부 개발자들을 위해 문서화하는 UI 개발도구이다.
- 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 만들어볼 수 있다.
- 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구이다.
- UI라이브러리로 활용하기 때문에 애플리케이션과 독립적인 개발환경에서 실행된다.
- 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
- 복잡한 개발스택, 특정데이터를 데이터베이스로 강제이동, 애플리케이션을 탐색할 필요 없이 전체 UI를 한 눈에 보고 개발할 수 있다.
styled component를 사용하게 되면 html, css, js가 묶어진다.
기술적으로는 느슨한 결합(loosely coupled)이지만, 기능적으로는 예를들면 한 '버튼'의 의미를 가진 것 끼리 묶은 것이다.
