SEB 섹션2. 16일차 TIL - React 컴포넌트 디자인(1)

 

요즘 블로그에 TIL을 평일에 매일 올리지 못하고 있는데, 이전에는 하루하루마다 새롭게 배우는 내용들을 정리하기 조금 쉬웠다. 그도 그럴 것이 코드스테이츠의 수업 모듈에 거의 대부분 설명이 있고 그걸 조금 정리하거나 부족한 부분은 내가 따로 찾아서 채우면 되는 쨋든 블로그 포스팅하기가 용이한 느낌이었다.

 

그런데 최근에는 수업모듈에서 크게 정리되지 않고 사용하는 프레임워크가 2~3일 간격으로 추가되어가고 있어서 정리하는 것에 다소 시간이 걸린다. 그리고 새로 배운 프레임워크 하나로 2일 동안 과제를 수행하게 한다.

 

그래서 그냥 이럴거면 하나의 챕터가 끝나면 정리해서 올리는게 낫거나 하루 하루 내가 정리한 만큼 혹은 이해한 만큼만 작성해서 올리는 방식으로 바꾸려고 한다. 

---

* 오늘은 새로운 라이브러리들에 알아보고 관련된 탄생 배경을 알아보는 내용이어서 실적용보다는 거의 개념 위주로 정리되었다.

CCD Component Driven Development

컴포넌트를 재사용하는 경우 등을 고려하여 레고 처럼 조립해 나갈 수 있는 부품 단위로 UI컴포넌트를 만들어 나가는 개발 방식

최근 프론트 엔드 쪽에서는 컴포넌트를 중심으로 개발해 나가는 CCD가 많이 사용되고 있다.

 

 

Storybook

Stroybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한번에 하나의 컴포넌트에서 작업할 수 있게 해준다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한눈에 보고 개발할 수 있다.

 

Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있도록 도와준다. 또한 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.

 

(처음에는 이게 CCD의 핵심이지 이해가 되지 않았는데 몇번 기능이 작동하는 경우를 보고나니 이걸 통해서 CCD가 완전해지는구나 하고 감탄했다.;;;)

 

[주요 기능]

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

 

Stories

* 공식문서의 내용을 의역하였다.

스토리는  UI컴포넌트의 렌더링된 상태를 가져온다(capture). 개발자들은 하나의 컴포넌트가 제공할 수 있는 모든 상태를 나타내는 개별 컴포넌트에서 복수의 스토리들을 작성할 수 있다.

 

예를 들어 제출 기능을 하는 버튼 하나에 대하여 어떠한 CSS 기능을 입힐 건지 등에 대하여 고민할 때 후보가 될 수 있는 CSS 속성들을 Story형태로 코드 작성 후, 나중에 StoryBook을 통해 시각적으로 확인해볼 수 있다.

 

[참고 StoryBook]

BCC

 

 

CSS in JS

CSS를 몇번 써본 결과 CSS속성을 여차저차 계속해서 적용하다가 보면 어느샌가 CSS파일은 너저분하고 지저분하게 변해있었다 ^^;; 그래서 아마도 선조 개발자분들께서는 이런 보기 싫은 외관을 개선하고 좀 더 효율적으로 CSS내용을 활용하기 위해서 여러가지 방법론을 만들었던 것으로 보인다. CSS-in-JS 또한 이러한 고민의 연속에서 탄생한 하나의 CSS 방법론으로 취급될 수 있다. 

 

BEM

Block Element Modifier의 준말로 CSS 방법론의 하나이다.

 

 

[문제점]

- 클래스명 선택자가 장황해짐

- 긴 클래스명 때문에 마크업이 불필요하게 커진다

- 재사용하여 할 때마다 모든 UI 컴포넌트를 명시적으로 확장

++ 언어로직 상 진정한 캡슐화의 개념이 성립되지 않는다.

 

 

Styled-Component

<배경>

애플리케이션 개발방향 ⇒ 컴포넌트 단위 개발

→ 캡슐화의 중요성 부각

 

CSS도 컴포넌트 기반 방식에 맞추기 위해 CSS-in-JS 탄색

(대표적으로 Styled Component가 있다)

 

 

<설명>

Styled Component

기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.

 

 

 

Styled-Component 특징