Component Driven Development (CDD)
재사용 할수 있는 UI component
조립해 나아가는 부품단위 UI 컴포넌트를 만들어 나가는 개발
storybook?
UI 개발 즉, Component Driven Development를 하기 위한 도구
UI 컴포넌트를 집중적으로 개발
각각의 컴포넌트들을 따로 볼 수 있다.
Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. —> 이를 통해 버그를 사전에 방지
테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드
- UI 컴포넌트들을 카탈로그 화하기
- 컴포넌트 변화를 Stories로 저장하기
- 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
- 리액트를 포함한 다양한 뷰 레이어 지원하기
CSS 전처리기(CSS Preprocessor)
CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
SASS?
Syntactically Awesome Style Sheets의 약자로 CSS를 확장해 주는 스크립팅 언어
반복되는 코드를 한번의 선언으로 여러 곳에서 재사용
- 코드의 재사용
- 코드의 간결화(유지보수 용이)
- 코드의 확장성
- 코드의 예측성(클래스 명으로 의미 예측)
CSS 방법론으로는 BEM
BEM이란 Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며, Block, Element, Model 각각은 —와 __로 구분
CSS-in-JS - Styled-Component / win!
기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공
컴포넌트 기반으로 CSS작성을 도와주는 라이브러리
syled Component
const Button = styled.a` //. 태그의 속성정의 a tag
`;
`백틱 사용`
리액트에서 사용
package.json에 다음 코드를 추가 여러버전 추가되는것 방지
{
"resolutions": {
"styled-components": "^5"
}
}특징
- Automatic critical CSS
- No class name bugs
- Easier deletion of CSS
- Simple dynamic styling
- Painless maintenance
- Automatic vendor prefixing
Styled Component - Adapting based on props & Extending Styles
스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수 있다.
const Button = styled.button`
background: ${(props) => (props.primary ? "palevioletred" : "white")};
color: ${(props) => (props.primary ? "white" : "palevioletred")};
...
`;
App(){
return(
<Buttion primary>Primary</Button>
)컴포넌트에 props 로 스타일 속성이 전달된다면 해당 컴포넌트는 props 로 전달된 속성을 우선 적용하며, 전달되는 속성이 없다면 기본으로 설정된 속성을 적용
컴포넌트 정의 시 상황(새로운 컴포넌트 생성 or 기존 컴포넌트 상속)에 따라 온점 . 또는 () 중 하나만 사용해야 한다.
