CDD (Component Driven Development)
페이지를 완성 후 다른페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착한 상황.
'이 부분을 새로 만들어야 할까?'
여러 프로젝트 혹은 여러 팀 간에 같은 UI 컴포넌트를 공유한다면 이런 고민을 하지 않아도 될 것이다.
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있다.
Component Driven Development (CDD)
이다.CSS-in-JS
CSS 전처리기(CSS Preprocessor)
: CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
CSS 전처리기의 등장 이유
CSS 전처리기(CSS Preprocessor)
자체만으로는 웹 서버가 인지하지 못하기 때문에,Compiler
를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 된다.클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며 HTML/CSS/SASS 파일에서도 더 일관된 코딩 구조를 만들어 준다.
하지만 이러한 방법론들에서도 문제점이 발생
또한 SASS와 BEM도 고치지 못했던 몇 가지 문제들은 언어 로직 상에 진정한 캡슐화의 개념이 없다는 것.
캡슐화(encapsulation)
: 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.
CSS-in-JS
에는 대표적으로 Styled-Component
Styled-Component
는 기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.