CDD

의미

💡 Component Driven Development의 약자
💡 부품 단위로 UI를 만들어나가는 개발 진행 가능
💡 재사용할 수 있는 컴포넌트 개발 가능

CSS의 구조화

📗 CSS
소규모 프로젝트의 증가, 프로젝트 복잡성의 심화, 다양한 디바이스의 등장으로
CSS의 작업을 효율적으로 하기위한 구조화된 CSS 필요성 대두

📗 CSS 전처리기
CSS의 단점을 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결
서버에 인식하게 하기 위해 Compiler를 사용, 용량이 매우 증가하는 단점

📗 CSS 방법론
-코드의 재사용성
-쉬운 유지보수
-확장 가능
-클래스명으로 의미 예측 가능

//block__element--modifier
.header__navi--text{
	color: red;
}

//block : 전체를 감싸는 요소
//element : 블럭이 포함하는 요소중 한 조각
//modifier: 블럭 또는 요소의 속성

✅ 언어 로직상의 진정한 캡슐화(객체의 속성과 행위를 하나로 묶고 // 실제 구현 내용 일부를 외부에 감추어 은닉함)가 되지 않음

CSS-in-Js(styled-components)

💡 CSS를 컴포넌트의 영역으로 불러 들임

npm install --save styled-components


//package.json
{
  "resolutions": {
    "styled-components": "^5"
  }
}

📗 컴포넌트 만들기

import styled from "styled-components";

const A = styled.button`
	background-color:#ccc;
	color: #000;
`;

export default function App(){
	return <A>a</A>
}

📗 컴포넌트 확장

import styled from "styled-components";

const A = styled.button`
	background-color:#ccc;
	color: #000;
`;

const Aa = styled(A)`
	padding: 10px;
`;

export default function App(){
	return (
      <>
        <A>a</A>
        <Aa>aa</Aa>
      </>
    )
}

📗 전역 스타일

//GlobalStyle.js
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button{
		padding: 5px;
		color: blue;
	}
`;

export default GlobalStyle;

//App.js
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

const Btn1 = styled.button`
	background : ${(props) => (props.color ? props.color : "white")};
`;
//const Btn1 = styled.button`
	//background : ${(props) => props.color || "white"};
//`;

export default function App() {
  return (
    <>
      <GlobalStyle />//전역 스타일 적용
      <Btn1>aa</Btn1>
      <Btn1 color="orange">Button1</Btn1>
    </>
  );
}