[React] Component Design

Component Driven Development (CDD)

• 재사용 할 수 있는 UI 컴포넌트
  • 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발
• 컴포넌트 생성 -> 컴포넌트 결합 -> 페이지 조립
  • 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.

컴포넌트 UI 개발을 위한 Storybook

• CCD가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 등장
• 많은 UI 개발도구가 있는데 그 중 하나가 Storybook이다.
  • UI 개발, CCD를 하기 위한 도구이다.
  • 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
  • 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한 눈에 보고 개발할 수 있다.
  • 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태 확인 가능
  • 이를 통해 버그를 사전에 방지
  • 또한 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.

왜 Storybook 과 같은 UI 개발 도구를 사용할까?

• 기본적으로 독립적인 개발환경에서 실행된다.
  • 개발자는 애플리케이션의 다양한 상황에 구애받지 않고, UI컴포넌트를 집중적으로 개발할 수 있다.
• 회사의 내부 개발자들을 위해 문서화를 하여 회사의 UI 라이브러리로써 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 플랫폼으로 사용할 수 있다.

Storybook 에서 지원하는 기능

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

Storybook을 이용하여 component를 시각화하거나, 시뮬레이션할 수 있는 다양한 테스트 상태를 만들어보자

• 세팅 방법
  • npx blah blah 까진 알곘는데 왜 yarn을 하는지 모르겠다.

CSS 방법론

BEM

• Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법
• 각각 __ 로 구분
• 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록하며,
  HTML, CSS, SASS 파일에서 더 일관성있는 구조를 만들어준다.
  • 하지만 문제점이 있다.
    • 클래스명 선택자가 장황
    • 재사용을 하려고 할 때마다 모든 UI컴포넌트를 명시적으로 확장해야만 했다.
• 또한 SASS와 BEM도 고치지 못했던 몇 가지 문제들은 언어 로직 상에 진정한 캡슐화의 개념이 없다는 것이었고, 이로인해 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없었다.
• encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉히는 개념

CSS 구조화를 위한 다양한 시도

• 어플리케이션으로 개발방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.
• 하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 한번도 없다.
• 결국 CSS도 컴포넌트 영영으로 불러들이기 위해 CSS-in-JS가 탄생하여 이 문제를 정확하게 해결한 것이다.
• 대표적인 방법으로 Styled-Component가 있다.
  • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.