코드스테이츠 소프트웨어엔지지어링 부트캠프 +57

StroyBook

• UI 개발, 즉 Component Driven Development 를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성하여 한번에 하나의 컴포넌트에서 개발할 수 있다.
  • StroyBook은 재사용성을 확대하기 위해 컴포넌트를 문서화 한다.
  • 자동으로 컴포넌트를 시각화하여 시물레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다.
  • 버그를 사전에 방지할 수 있다.
  • 개발 속도 향상 및 어플리케이션 의존성 걱정X

 

• StoryBook 사용 이유
  • StoryBook은 기본적으로 독립적인 개발환경에서 사용되기 때문에 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발 할 수 있다.
  • 회사 내부 UI라이브러리로 사용하거나 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용할 수 있다.

 

• Storybook에서 지원하는 주요 기능은 다음과 같다.
  • UI 컴포넌트들을 카탈로그 화하기
  • 컴포넌트 변화를 Stories로 저장하기
  • 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
  • 리액트를 포함한 다양한 뷰 레이어 지원하기

Styled-Component 시스템

예시

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

 

Styled Component의 특징은 아래와 같다.

 

 - Automatic critical CSS

Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다. 따라서 코드 를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있다.

 

 - No class name bugs
Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여준다.

 

 - Easier deletion of CSS
기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 한다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다.

 

 - Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하 고 직관적이다.

 

 - Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다.

 

Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 된다. 이외의 것들은 Styled Component 가 알아서 처리해 준다.