TIL_CDD

💡CDD (Component-Driven Development)

부품 단위로 UI컴포넌트를 만들어 나가는 개발 방법

프로젝트를 진행하다보면, 이전 프로젝트에서 만들어 놓은 UI와 똑같이 구현해야 할 경우가 발생한다.

그렇다면 그럴때마다, UI를 다시 만들어야 될까?

이를 해결하기 위해 사용되는 방법이 CDD이다.
말 그대로, UI컴포넌트를 하나의 부품처럼 만들어서 나중에 결합만 하면 되도록 하는 방법이다.

💡 CSS-in-JS

규모가 작은 애플리케이션이면 몰라도 컴포넌트의 종류가 많은 애플리케이션의 경우 클래스와 아이디도 늘어나기 때문에 따로 HTML, CSS, JS별로 관리하기가 매우 어려워진다.

자바스크립트에 CSS를 가져와 작성함으로써 UI컴포넌트 별로 스타일과 동적내용을 하나로 묶을 수 있게 되었고, CDD를 더 용이하게 사용할 수 있게 해준다.

💡 Styled Components

CSS in JS 라이브러리 중 가장 인기 있는 라이브러리이다.

🔍 설치

 npm install --save styled-components

터미널에서 npm install 후,

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

package.json에 위의 코드를 추가해준다.
여러 버전의 styled components가 설치되지않도록 해주기 위해서이다.

import styled from "styled-components"

마지막으로 styled components를 사용할 파일에 import해주면 준비는 끝이 난다.

🔍 Styled Components 문법

📌 컴포넌트 만들기

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

	> 태그1 자식태그

	& 태그1 : hover (active, focus...)
`

Styled Components는 Templete Literals 문법을 사용한다.
그래서 작은따옴표가 아닌 백틱을 사용한다.

📌 컴포넌트 재활용

const RedButton = styled.button`
	background-color : red;
	color : white;
`

const BigRedButton = styled(RedButton)`
	width : 100px;
	height : auto;
`

📌 Props

const Button = styled.button`
	background-color : ${(props) => props.skyblue ? "skyblue" : "black"};
	color : white;
`
...

<Button skyblue>Colored Button</Button>
<Button>Normal Button</Button>
`

props의 이름에 따라 조건부 랜더링을 해줄 수 있다.

const Button = styled.button`
	background-color : ${(props) => props.color ? props.color : "black"};
	color : white;
`
...

<Button color = "cyan">Colored Button</Button>
<Button>Normal Button</Button>
`

props의 값에따라 조건부 랜더링을 해줄 수 있다.

📌 Global Style

컴포넌트 별로 Styled Component를 만들 수 있지만, CSS의 * 처럼 모든 요소에 공통적으로 적용시키고 싶을 때도 있을 것이다.
그럴때 createGlobalStyle 함수를 사용한다.

import { createGlobalStyle } from "styled-components";

먼저, styled-components에서 createGlobalStyle 함수를 import 시켜주고,

const GlobalStyle = createGlobalStyle`
	margin : 0;
	padding : 0;
`

GlabalStyle이라는 이름으로 createGlobalStyle 함수를 써서 Styled components를 만들어준다.

const App = () => {
	return(
    	<GlobalStyle />
      	...
    )
}

최상위 컴포넌트의 가장 위에 컴포넌트를 넣어주면 전역에 GlobalStyle 컴포넌트의 스타일이 적용된다.