[🏠 아키텍쳐 ] CDD - Styled Component

CDD ( Component Driven Development , 컴포넌트 단위 개발론 )

CDD는 Component Driven Development를 의미한다.
즉, 컴포넌트 단위의 개발이라는 의미이다.

컴포넌트 하나는 작은 기능을 구현한 단위에 해당되는데,
이 컴포넌트들을 조립해서 하나의 결과물을 도출하는 것이다.
작은 단위에서 점차 확장한다는 점에서 상향식 개발방법에 해당한다.

CDD의 필요성

큰 규모의 프로젝트들이 증가함에 따라서 CDD 개발의 필요성이 점차 증가하였다. 리액트의 등장으로 컴포넌트 단위의 개발 자체는 원활하게 진행되는데 반해, CSS에서는 마땅한 컴포넌트 단위로의 개발 방법이 존재하지 않았다.

CSS 전처리기의 한계

SASS 등 CSS의 전처리기의 등장으로, CSS를 구조화하여 작성하는 것이 쉬워지게 되었다. 하지만 이는 수많은 파일을 계층적으로 만들어 내는 방식으로, 어마어마한 용량을 가진 파일을 생성하였다.

CDD 방법론의 대두

이러한 CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었다.

아래는 BEM의 예시이다.
블럭요소 - 조각 - 속성 에 따라서 선택자 작명을 하는 방법이다.
이러한 긴 클래스명은 컴포넌트 재사용시 따로 컴포넌트를 확장을 해야하는 불편함이 있었고, 마크업이 불필요하게 커진다는 단점이 있었다.

각각의 장단점이 있으나 결국 세 방법론 모두 같은 지향점을 가지고 있는데 방법론의 공통 지향점은 다음과 같다.

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

하지만 CDD 방법론의 단점은 캡슐화가 불가능하다는 것이었다.
캡슐화는 애플리케이션으로 개발 방법이 진화함에 따라서 점차 더더욱 중요하게 되었다.

---

Styled Component (in JS)

CSS 방법론의 문제점인 캡슐화를 해결해주는 Styled Component in JS가 등장하게 되었다.
Styled Component는 라이브러리로 리액트에서 사용 가능하며, CSS를 컴포넌트화 시켜주는 도구이다.

CSS 또한 JS 파일 내에서 작성 가능하므로, JS 파일과 함께 컴포넌트 개발이 가능하다.

1. Styled Component 설치

$ npm install --save styled-components

2. 파일에 import

import styled from "styled-components"

3. 컴포넌트 생성
   특이한 점은 태그명 뒤에 `(백틱)으로 묶어준다는 점이다.
   컴포넌트처럼 사용하므로 컴포넌트 이름도 꼭 대문자로 맞춰줘야 한다.

const 컴포넌트 이름 = styled.태그명`
	CSS속성 : CSS속성 값; 
`;

const redButton = styled.button`
	color : red,
    backgroundColor : white;
`;

4. 컴포넌트의 재활용도 가능하다.

const 새로운 컴포넌트명 = styled.(재활용할 컴포넌트명)`
	추가할 CSS속성 : 추가할 CSS속성 값; 
`;

const bigRedButton = styled.(redButton)`
	width : 100px;
`;

5. 전역 스타일 설정
   createGlobalStyle을 임포트 후, <GlobalStyle />을 최상단 컴포넌트에 사용한다.

import { createGlobalStyle } from "styled-components";

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

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