React #16

Component-Driven Development (CDD)

컴포넌트 수준에서 시작해 페이지나 화면을 완성
부품 단위로 UI 컴포넌트를 만들어 나가는 개발

장점

1. Focus development
   전체 앱의 구체적인 상황을 설정하긴 매우 힘들지만
   특정 컴포넌트의 상태만 조작하기는 쉽다
2. Increase UI coverage
   컴포넌트가 가능한 모든 시나리오에서 동작하는지
   확인할 수 있다
3. Target feedback
   앱 전체가 아닌 어떤 컴포넌트 하나를 놓고
   같이 작업하는 동료과 자세한 커뮤니케이션을 할 수 있다
4. Build a component library
   팀원 모두가 작업한 컴포넌트를 한번에 볼 수 있는 library를 만들 수 있다
   = 컴포넌트를 재사용하기 쉬워진다
5. Parallelize development
   팀원들과 작업한 컴포넌트를 공유하면서 개발할 수 있다
6. Test visually
   컴포넌트 익스플로러로 "볼 수 있는" 테스트를 할 수 있게 된다

컴포넌트 익스플로러 - CDD를 지원하기 위한 도구
앱의 컴포넌트를 다양한 테스트 "상태"에서 보여주는 별도의 응용 프로그램

Storybook
널리 사용되는 컴포넌트 익스플로러 중 하나

주요 기능

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

---

Reference
codestates - [React] 컴포넌트 디자인
[번역] - Component-Driven Development
Component-Driven Development