[React] CDD

CDD (Component Driven Development)

: 부품 단위로 UI 컴포넌트를 개발하여 재사용성을 높인, 효율적인 개발 방식입니다.

Background

전반적인 웹 앱 서비스의 품질이 높아져감에 따라, 복잡한 프로젝트, 많은 팀원 등 CSS를 작성하는 일관된 패턴이 필요해졌습니다. 그렇게 CSS 전처리기라는 개념이 등장하였습니다.

위에 서술하였듯이 CSS의 일관된 패턴, 즉 구조인 CSS 작성을 도와주는 도구입니다. 하지만 시간이 지나면서 CSS 전처리기에 대한 각종 문제점이 나타났고, 다음과 같은 CSS 방법론들이 대두되었습니다.

1. BEM
2. OOCSS
3. SMACSS

세 방법론의 공통 지향점으로는 코드의 재사용, 간결화, 확장성, 예측성이 있습니다.

하지만 이러한 방법론에서도 문제점은 나타났습니다. 클래스명 선택자가 장황해지고, 재사용이 필요할 때엔 명시적인 확장성에 의존해야했습니다.

앱 개발 방향이 진화하면서 컴포넌트 단위의 개발이 이루어졌지만, CSS를 컴포넌트 기반으로 이루어진적은 없었습니다. 이런 새로운 시도를 하고자 CSS-in-JS가 나타나게 되었습니다.

Styled Component

: 기능적인 혹은 상태를 지닌 컴포넌트로부터 UI를 분리시켜 사용할 수 있는 직관적인 패턴을 제공합니다.

작성법

다음과 같이 탬플릿 리터럴문법을 이용해 작성을 합니다.

const Compo = styled.Tag `
	css attributes1 : attributes value;
    css attributes2 : attributes value;
`;

컴포넌트를 재활용해서 새로운 컴포넌트 만들기

컴포넌트를 선언하고 styled() 안에 재활용할 컴포넌트를 넣어준 다음, 추가하고싶은 CSS 속성을 넣어주면 기존 컴포넌트에 추가되어 사용 가능합니다.

const Reuse = styled(Compo) `
	css attributes3 : attributes value; 
`

Props 활용

스타일 컴포넌트 또한 리액트 컴포넌트처럼 Props로 데이터를 내려줄 수 있습니다. 템플릿 러터럴 문법을 사용하여 JS 코드를 사용할 수 있습니다.

const CompoProps = styled.Tag `
	css attributes : ${ (props) => {function code} }
`

전역 스타일 적용하기

만들어진 스타일 컴포넌트를 최상위 컴포넌트에 적용을 해주면 전역 스타일로 적용됩니다.