CDD (Component Driven Development)

Rosevillage·2023년 2월 20일

UI를 컴포넌트 단위로 만들어 재사용하는 CDD에 대해서 정리해본다.

CDD

재사용 할 수 있는 UI컴포넌트를 만들어 가는 개발 방법론

구조화된 CSS

프로젝트 규모나 복잡도, 디바이스들의 다양성 증가로 CSS의 복잡도가 필연적으로 증가함에따라 CSS 작업의 효율성 증가를 위해 CSS 구조화의 필요성이 대두 되었고, 그 결과 CSS 전처리기(CSS Preprocessor) 라는 개념이 등장했다.

CSS 전처리기

자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램으로 기존 CSS에 존재하지 않는 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 등의 추가적인 기능들로 CSS 구조를 가독성있고 더 유지보수 하기 좋게 만들 수 있다.

하지만 추가적으로 compiler가 필요하고, 전처리기가 내부에서 어떤 작업을 하는지 알지 못해, 스타일이 겹치지 않도록 계층 구조를 만들어 내는 것에 의지하기 때문에 컴파일된 CSS의 용량이 커지는 문제점을 지니고 있다.

SASS
CSS 전처리기중 가장 유명한 스크립팅 언어로 CSS를 확장시켜 준다.

자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 하는 기능 등을 가진다.

또 다른 방법론

전처리기의 단점을 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었다. 각각의 장단점이 있으나 결국 세 방법론 모두 같은 지향점을 가진다.

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

하지만 이 방법론들도 클래스명 선택자가 장황해지고, 긴 클래스명 때문에 마크업이 불필요하게 커지며, 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 하는 문제를 지니고 있으며, 캡슐화를 할 수 없기 때문에 유일한 클래스명을 사용하는 것 외에 중첩 변수를 막을 방법이 없었다.

BEM
클래스명을 Block, Element, Modifier로 구분해 작성하는 방법론으로 Block, Element, Modifier는 각각 --와 __로 구분한다.

CSS in Js

컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다. 하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없었기에 CSS도 컴포넌트 영역으로 불러들이기 위해 CSS-in-JS가 탄생했다.

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴 X, !important의 남용
SASS	프로그래밍 방법론 도입, 컴파인된 CSS를 만들어내는 전처리기	재사용 가능, CSS의 구조화	전처리 과정 필요, 디버깅의 어려움, 컴파일한 CSS파일이 거대해짐
BEM	CSS 클래스명에 일관된 패턴을 강제하는 방법론	네이밍으로 문제해결, 전처리 과정 불필요	선택자 이름이 너무 장황하고, 클래스 목록이 너무 많아짐
Styled-Component (CSS-in-Js)	컴포넌트 기반으로 CSS 작성을 도와주는 라이브러리	CSS 컴포넌트로 캡슐화, 네이밍이라 최적화 신경쓸 필요 X	빠른 페이지 로드에 불리

Styled-Component

CSS in JS 라이브러리 중에서 현재 가장 인기 있는 라이브러리로 CSS를 쉽게 Javascript 안에 넣어, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 해준다.

설치

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

위의 명령어로 쉽게 설치 할 수 있으며, package.json에 다음과 같이 버전을 설정해 추가적인 버전 설치를 방지할 수 있다.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

작업할 파일 최상단에 import하면 사용할 수 있다.

import styled from "styled-components"

문법

백틱을 사용하는 Templete Literals 방식의 문법을 지닌다.

컴포넌트 생성

const ComponentName = styled.tagType`
  color: blue;
  background: black;
`

컴포넌트 재활용
기존 컴포넌트를 인자로 전달하고 추가할 속성을 지정해 사용할 수 있다.

const NewComponentName = styled(recycleComponent)`
  width: 500px;
`

props 활용

const Button = styled.button`
  color: ${(props)=>props.color||'white'};
`

<Button color='red'/>
  // or
<Button/>

전역 스타일
전역 스타일은 createGlobalStyle 함수를 통해서 지정할 수 있다.

import {createGlobalStyle} from 'styled-component';

사용은 기존 styled component 방식과 같다

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
   margin : 2px;
   border-radius : 5px;
	}
`

만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용하면 전역에 스타일이 적용된다.

function App() {
  return (
	  <>
		 <GlobalStyle />
		 <Button>전역 스타일 적용하기</Button>
	  </>
  );
 }

Storybook

UI 컴포넌트 개발 도구

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있으며, 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.

Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있고, 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.