[Unit3] Custom-Component - CDD개발도구

Styled Components

기존 돔을 만드는 방식인 css파일을 밖에 두고, 태그나 id, class이름을 가져와쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는것
css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다.

Styled Components 문법

1. 컴포넌트 만들기
템플릿 리터럴 문법 사용컴포넌트를 선언하고 styled.태그종류를 할당한다.
백틱 안에는 기존 CSS문법과 똑같이 스타일 속성을 작성해주면 된다.

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

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기
이미 만들어진 컴포넌트를 재활용해 새로운 컴포넌트를 만들 수 있다.컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달하고 추가하고 싶은 스타일 속성을 작성한다.

//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있습니다.
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;
//재활용한 컴포넌트를 재활용할 수도 있습니다.
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

3. Props 활용
템플릿 리터럴 문법(${ })을 사용해 js 코드를 사용할 수 있다.

• Props로 조건부 렌더링
  
  
• Props 값으로 렌더링
  4. 전역 스타일 설정
  StyledComponents에서 createGlobalStyle함수를 불러온다.

import { createGlobalStyle } from "styled-components";

함수를 사용해 CSS파일처럼 스타일 작성

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`

GlobalStyle컴포넌트를 최상위 컴포넌트에 사용해 주면 전역에 스타일이 적용된다.

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

---

Storybook

Component Driven Development를 하기 위한 도구
각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한번에 하나의 컴포넌트 작업이 가능

• 재사용을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화해 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다.
• 버그 사전 방지
• 테스트 & 개발 속도 향상
• 의존성 걱정없이 빌드 가능
  
  
  Storybook 주요 기능
• UI 컴포넌트들을 카탈로그화
• 컴포넌트 변화를 Stories로 저장
• 핫 모듈 재로딩과 같은 개발 툴 경험을 제공
• 리액트를 포함한 다양한 뷰 레이어 지원