CDD

CDD (Component Driven Development)

 

재사용 할 수 있는 UI 컴포넌트를 만들어 둔 다음 용도에 맞게 재사용 하는 것.

 

컴포넌트를 하나의 조각이라 생각하고 큰 틀에 맞춰 끼워나간다고 생각.

 

Styled Components

 

CSS in JS 라는 개념이 대두되면서 나온 라이브러리

CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발

 

그 중 가장 인기 있는 것이 Styled Components

 

Styled Components 사용법

 

// 터미널에서 입력 후
npm install --save styled-components
// 사용할 파일로 불러오기
import styled from "styled-components"

 

Styled Components 문법

 

Styled Components는 Templete Literals 문법을 사용

 

컴포넌트 만들기

const BlueButton = styled.button `  // <- 백틱 사용
  background-color: blue;
  color: white;
`; // <- 마무리

 

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

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

//만들어진 컴포넌트를 재활용해 새로운 컴포넌트 만들기
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

 

Props 활용하기

 

내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능

props를 받아오려면 props를 인자로 받는 함수를 만들어 사용

Props로 조건부 렌더링

 

삼항연산자 사용

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

export default function App() {
  return (
    <>
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );

props로 조건에 맞게 재사용

 

Props 값으로 렌더링하기

 

props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용

const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//아래와 같은 형식으로도 활용
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
    );

 

전역 스타일 설정

 

전역에 설정하고 싶을 땐 createGlobalStyle함수를 불러와야 한다.

// 글로벌 함수 createGlobalStyle 불러오기
import { createGlobalStyle } from "styled-components";
// 글로벌 스타일 지정하기
const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
// 글로벌 스타일 사용하기 최상위 컴포넌트에서 사용

function App() {
	return (
		<>
			<GlobalStyle />
            	<Button></Button>
		</>

 

컴포넌트 UI 개발을 위한 Storybook

 

UI 개발 즉, Component Driven Development를 하기 위한 도구

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업

재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인

 

Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장

Component Explorer에는 많은 UI 개발 도구가 다양하게 있는데 그중 하나가 Storybook