CDD(Component Driven Development), Styled Component

1. CDD(Component Driven Development)

• 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법.

2. CSS 방법론들

• CSS 전처리기(CSS Preprocessor): CSS 작업을 효율적으로 하기 위해, 구조화된 CSS가 필요해졌고, CSS 전처리기는 이를 위해  CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다.

• SASS(Syntactically Awesome Style Sheets): CSS 전처리기 중 하나. CSS를 확장해주는 스크립팅 언어. 
• CSS 구조화를 위한 지향점들(CSS 방법론)
  • 코드의 재사용
  • 코드의 간결화(유지 보수 용이)
  • 코드의 확장성
  • 코드의 예측성(클래스 명으로 의미 예측)

• BEM(Block, Element, Modifier): CSS 방법론 중 하나. BLock, Element, Modifier로 구분하여 클래스명을 작성하는 방법.
  • Block, Element, Modifier는 각각 __와 --로 구분함.
  • Block: 전체를 감싸고 있는 블럭 요소
  • Element: 블럭이 포함하고 있는 한 조각
  • Modifier: 블럭 또는 요소의 속성
  • 클래스명 덕분에 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 해 더 일관된 코딩 구조를 만들어줌.
  • 하지만 클래스명 선택지가 장황해지고 긴 클래스명 때문에 마크업이 불필요하게 커지는 등, 문제점이 있음
  • 예시: .header__navigation--navi-text 에서 header는 Block, navigation은 Element, navi-text는 Modifier임.
• Styled-Component: CSS-in-JS 중 하나. 기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공.

 

3. Styled Component

• CSS를 컴포넌트화 해서 다룰 수 있게 하는 라이브러리.
• 컴포넌트를 만들거나, 이미 존재하는 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수도 있다.
• 또한 React의 컴포넌트처럼 props를 이용할 수도 있다.

const 컴포넌트이름 = styled.태그종류`
  css속성: 속성값;
`;

const Btn = styled.button`
  background-color: blue;
`;

const BigBtn = styled(Btn)`
  width: 100px;
`;

const BeautifulBtn = styled.button`
  background-color: ${(props) => props.backgroundColor};
`;

// <BeautifulBtn backgroundColor="white"></BeautifulBtn> 와 같이 props 지정 가능

• 전역스타일 또한 지정할 수 있는데, createGlobalStyle을 이용하면 가능하다.

 

 

---

createGlobalStyle 참고: https://styled-components.com/docs/api#helpers