컴포넌트 단위로 개발하기
Component-Driven Development(CDD)
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하는 방법
Storybook
CDD 방식이 주를 이루면서, 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기)가 등장을 했다. 그중 하나인 Storybook에 대해 알아보자.
Storybook은 UI 개발 (CDD)를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한번에 하나의 컴포넌트에서 작업할 수 있다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있다. 또한 테스트 및 개발 속도를 향상시키고, 어플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.
Storybook은 기본적으로 독립적인 개발환경에서 실행된다. 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
Storybook에서 지원하는 주요 기능
- UI 컴포넌트들을 카탈로그화
- 컴포넌트 변화를 Stories로 저장
- 핫 모듈 재 로딩과 같은 개발 툴 경험 제공
- 리액트를 포함한 다양한 뷰 레이어 지원
CSS 발전 과정
프로젝트의 규모가 점점 커짐에 따라 CSS를 작성하는 일관된 패턴이 필요하게 되었고 다양한 디바이스의 등장으로 그에 맞는 디스플레이를 구현해야했기에 CSS는 더욱 복잡해졌다. 이에 CSS 작업을 효율적으로 하기 위해 구조화된 CSS가 필요했고 CSS를 구조화하는 방법이 발전되었다.
CSS Preprocessor (전처리기)
위의 문제점을 해결하기 위해 CSS 전처리기라는 개념이 등장했다. CSS 문서를 작업할 때는 많은 반복적인 작업을 요구하고, 클래스의 상속과 같은 사항으로 CSS 문서는 점점 양이 많아지고 결국 유지관리가 어려워 질 수 있다.
CSS 전처리기를 통해 CSS파일을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생겼다.
하지만 얼마 지나지 않아 CSS 전처리기가 CSS의 구조화를 해결해주는 장점보다 더 많은 문제들을 만들어낸다는 것이 알려졌다. 우리는 전처리기가 내부에서 어떤 작업을 하는지도 모른 채, 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어내는 것에 의지했고, 그 결과 컴파일된 CSS의 용량이 어마어마하게 커지게 된 것이다.
CSS 방법론
CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS와 같은 공통의 지향점을 가진 CSS 방법론이 나타났다.
- 코드의 재사용
- 코드의 간결과 (유지보수 용이)
- 코드의 확장성
- 코드의 예측성 (클래스 명으로 의미 예측)
BEM
CSS 방법론 중 하나로 Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이다. 각각은 __와 --로 구분한다. 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며 더 일관된 코딩 구조를 만들어 준다.
.header__navigation--navi-text {
color : red;
}하지만 이러한 방법론들에서도 문제점이 발생한다. 클래스명 선택자가 장황해지고 이런 긴 클래스명 때문에 마크업이 불필요하게 커지며 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 했다. 그리고 언어 로직 상에 진정한 캡슐화의 개념이 없었기에 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수밖에 없었다.
CSS-in-JS
개발 방향이 어플리케이션으로 나아가면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다. 하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없었다. 결국 CSS도 컴포넌트 영역으로 불러들이기 위해 CSS-in-JS가 등장했다.
그중 대표적인 것으로 Styled-Component가 있는데 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다. styled-Component는 CSS를 컴포넌트 안으로 캡슐화하여 네이밍이나 최적화를 신경 쓸 필요가 없다.
Styled-Component
Styled-Component는 React 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생했다. Styled-Component를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다.
// <a> 태그로 덮힌 컴포넌트
const 컴포넌트 = styled.a`
// 기존 css 문법 사용
color : red;
`;Styled-Component 특징
- Automatic critical CSS
화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동 삽입 - No Class name of CSS
스스로 유니크한 className 생성 - Easier deletion of CSS
모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 삭제할 경우 간편 - Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적 - Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 간편 - Automatic vendor prefixing
개별 컴포넌트마다 기존 CSS를 이용하여 스타일 속성을 정의
