2/20 일일정리 Custom Component

1. CDD

컴포넌트 주도 개발, CDD(Component Driven Development)란 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론이다. 컴포넌트 수준에서 시작해 페이지나 화면까지 UI를 구축하는 bottom up 방식을 가지고 있다.

CDD의 장점으로는 다음과 같은 것들이 있다.

⓵ 각각의 컴포넌트를 단위로 작업하기 때문에 어떤 기능에 문제가 생겼을 때 무엇이 문제인지, 어떤 컴포넌트의 문제인지 쉽게 확인할 수 있다.

⓶  컴포넌트의 재사용을 극대화 시킬 수 있다.

⓷ 팀원과 협업을 할 때 컴포넌트 단위로 역할 분담을 하기 쉽다. 또한 컴포넌트가 변경되거나 작동방식이 바뀌어도 다른 팀원에게 쉽게 설명할 수 있다. 

⓸  UI 측면에서는 바로바로 시각적으로 테스트를 할 수 있기 때문에 TDD와 같은 효과를 낼 수 있다.

 

2. 구조적인 CSS 작성방법의 발전

전통의 CSS

 웹사이트 개발 방식이 꾸준히 발전함에 따라 CSS의 작성이 복잡해지고, 개발자나 회사마다 저마다의 방식으로 CSS를 작성하였다. 또한 디스플레이가 발전하면서 컴퓨터, 탭, 스마트폰 등 다양한 기기의 디스플레이를 커버해야 했기 때문에 구조화된 CSS의 필요성이 생기기 시작했다.

 

CSS 전처리기

이러한 문제를 해결하기 위해 CSS 전처리기가 등장했다. 대표적인 CSS 전처리기인 SASS에서는 반복되는 값을 변수로 지정해두고 사용하여 재사용성과 편의성을 늘리고, 선택자도 개발자가 알아보기 쉽게 작성할 수 있기 때문에 많은 인기를 끌었다. SASS 문법으로 작성된 파일은 컴파일 과정을 거쳐 CSS로 변환되어 웹페이지에 적용된다.

출처 : https://joshuatz.com/projects/web-stuff/sass-embed-dynamic-embeddable-sass-scss-to-css-playground/

그러나 CSS 전처리기 역시 단점이 존재한다. 파일 자체의 용량이 기존 CSS보다 훨씬 크고, 컴파일하는 과정에서 시간이 걸리기 때문에 웹페이지를 로딩하는데 좀 더 오랜 시간이 걸린다. 

 

CSS 방법론

이러한 CSS 전처리기의 단점을 보완하기 위해 여러가지 CSS 방법론이 대두되었다.

여러가지 방법론의 지향점은 코드의 예측성, 간결성, 확장성, 재사용성이다. 

여러명이 작업을 할 때 공통적으로 규칙과 컨벤션을 정하여 쉽게 알아볼 수 있게 하는것도 중요한 목적이라고 할 수 있다.

https://www.youtube.com/watch?v=1OKZOV-iLj4

대표적인 CSS 방법론인 BEM은 간단한 이름짓기 컨벤션을 통해서 협업할 때 같은 방식으로 이름을 작성할 수 있게 하면서 구조를 표현하여 Specificity를 하나로만 관리할 수 있게 해서 기존의 문제점을 해결하고자 하는 방식이다.

 

CSS-in-JS

위의 CSS 전처리기와 CSS 방법론에서는 언어 로직상에서 캡슐화를 제대로 하지 못하기 때문에 개발자가 유일한 클래스명을 선택하는 것에 의존해야 했다. 또한 CSS의 global scope로 인해서 컴포넌트와 CSS간의 구조와 범위가 일치하지 않는 문제도 여전히 존재했다.

이러한 문제들을 JS로 해결하기 위한 움직임이 생겨났다. 

 

대표적인 CSS-in-JS 방식에는 Styled-Component 가 있다.

 

3. Styled-Component

React는 JSX 문법을 사용하여 웹페이지를 컴포넌트 단위로 Html과 Javascript 코드를 함께 작성하는 라이브러리이다. 기존에는 React코드로 Html과 Javascript 코드를 작성하고 CSS 코드는 따로 작성을 했는데, 컴포넌트 단위 개발에서 하나의 컴포넌트 내에 Html, Javascript, CSS 모두 작성하면 좋겠다는 생각으로 CSS-in-JS 방식으로 만들어진 라이브러리인 Styled-Componet가 나오게 되었다.

* {
  margin: 0.5rem;
}

#practice {
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
}

#practice:hover {
  background: cornflowerblue;
  color: white;
  transition: 0.5s;
}

위 코드는 기존에 작성하던 css 방식이다. Styled-Component 문법으로 작성하면 아래와 같다.

 

import styled,{createGlobalStyle} from 'styled-components'

const GlobalStyle = createGlobalStyle`
  * {
    margin : 0.5rem;
  }
`

const Button = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
  &:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`

 

Styled-Component 라이브러리를 사용하면 JSX 파일안에 있는 하나의 컴포넌트의 모든 사항을 한눈에 알 수 있기 때문에 컴포넌트 단위의 개발방식인 CDD(Component Driven Development)방식에 적합하다고 할 수 있다.

 

 

4. StoryBook

CDD 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했는데 그중 하나가 Storybook이다.

 

웹페이지가 커지면 커질수록 사용하는 컴포넌트들도 많아지기 때문에 어디에 어떤 컴포넌트가 무슨 역할을 하는지 한 눈에 알아보기 힘들 수 있다. Storybook은 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 

 

Storybook을 사용함으로서 얻는 이점은 다음과 같다.

⓵ 컴포넌트 단위로 쪼개서 독립적으로 개발을 진행하기 때문에 한눈에 보기 쉽고 찾기 힘든 예외 사항 같은 것들도 명확하게 발견할 수 있다.

⓶ 자동으로 컴포넌트를 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있다.

⓷ 컴포넌트를 문서화하여 재사용성을 늘리고 다른 팀원과의 의사소통 과정에서도 컴포넌트의 기능이나 역할을 쉽게 설명할 수 있다.

⓸ 컴포넌트가 어떻게 동작할지 추측하는 것이 아니라 실제로 어떻게 동작하는지를 눈으로 확인할 수 있다.

⓹ 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.

 

 

 

 

Reference

- https://www.daleseo.com/react-styled-components/

- https://storybook.js.org/docs/react/why-storybook

- https://velog.io/@teo/css-history-1

- https://velog.io/@yesdoing/%EB%B2%88%EC%97%AD-Component-Driven-Development-udjzqwqgay