[React]CDD

Component Driven Development

Component Driven Development

• 부품단위로 UI 컴포넌트를 만든다.
• 재사용할 수 있는 컴포넌트를 개발한다.
• 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발

CSS in JS

다양한 디바이스에서 인터넷 사용, 프로젝트의 규모나 복잡도가 커짐
=> CSS를 작성하는 일관된 패턴이 필요해짐
=> CSS 전처리기 등장 (CSS가 구조적으로 작성할 수 있게 도와줌)
=> 하지만, CSS 전처리기 만으로는 웹 서버가 인지하지 못함
=> 각 CSS 전처리기에 맞는 Compiler 가 등장
=> 우리가 사용하는 css문서로 변환
=> css파일 구조화

1) SASS (Syntactically Awesome Style Sheets)

• css 전처리기 중 가장 유명하다
• css를 확장해주는 스크립팅 언어
• 자바스크립트 처럼 속성(color, margin, width등)의 값(#fffff, 25rem, 100px등)을 변수로 선언해서 필요한 곳에 선언된 변수를 적용할 수도 있고, 여러곳에 재사용 가능
• scss 코드를 읽어 전처리한 다음 컴파일해서 전역 css 번들 파일을 만들어 주는 전처리기의 역할을 한다.
  => 문제 해결을 위해 단순히 계층 구조를 만들어 내는 것에 의지하면서 css용량이 너무 커짐

2) BEM, OOCSS, SMACSS 등 CSS 방법론 대두

• 코드의 재사용
• 코드의 간결화(유지 보수 용이)
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미 예측)

3) BEM
Block, Element, Modifier로 구분해 클래스명을 작성
Block : 전체를 감싸고 있는 블럭 요소
Element : 블럭이 포함하고 있는 한 조각
Modifier : 블럭 또는 요소의 속성

• 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있게 함
• HTML/CSS/SASS 파일에서도 일관된 코딩 구조 만들어줌
• 클래스명 선택자가 장황해짐 => 마크업이 불필요하게 커지고, 재사용하려 할때마다 모든 UI 컴포넌트를 명시적으로 확장해야 했음
• 캡슐화의 개념이 없었다.(객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)

=> 캠슐화의 중요성 대두, CSS 컴포넌트 기반의 방식
=> CSS-in-JS 등장! 그 중에서도 Styled-Component !!!

CDD 개발 도구 개요

React 로 CDD를 할 수 있는 대표적인 도구, Styled Component 사용법과 컴포넌트들을 문서화하고 관리할 수 있는 도구인 Storybook의 사용법을 알아보자!
이 두 도구의 사용법을 잘 익히면 구조적이고, 재사용성 높은 react 프론트엔드 개발을 할 수 있다!!

Styled Components

Storybook