BEB Section 2 - React 컴포넌트 디자인

 

Component-Driven Development

 개발자와 디자이너가 페이지를 만들었고, 그 페이지를 본 기획자가 수정본을 요청했다고 하자. 그 수정본을 살펴보니 버튼의 위치가 바뀐 것이지, 기능은 똑같았다. 이 부분에 대해 UI 컴포넌트를 재사용할 수 있다면 개발자와 디자이너는 다시 만들 필요가 없다. 이 부분을 해결하기 위해 Component-Driven Development 방법이 나왔다. 

 

 

Storybook

https://storybook.js.org

Storybook: UI component explorer for frontend developers

 

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

 

 Storybook의 주요 기능은 다음과 같다.

• UI 컴포넌트 카탈로그화
• 컴포넌트 변화 Stories로 저장
• 개발 툴 경험 제공
• React 포함 다양한 뷰 레이어 지원

 

Storybook Install

 기본적인 문법 사용은 아래와 같은 명령어를 입력해서 설치한다.

 

npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox // macOS version

 

 

구조화된 CSS 가 필요하게 된 이유

 사실 라떼는 말이에요, 학부 시절엔 CSS가 디자인과 관련된 프로그래밍 언어였기 때문에 다루지 않았다. 항상 교수들도

 

디자인은 니네가 할 필요가 없다!

 

 라고 너무 당당하게 말해주셔서 쳐다도 보지 않은 언어가 CSS였다. 원체 디자인을 잘 못하는 사람이기도 하고. 그런데 여기 와서 알게 된 CSS는 너무 어려웠고, 공부하는 당시에만 해도 왜 해야하는지, 이걸 왜 가르쳐주는지 이해가 되지 않았다.

 

그러니까 나도 처음엔 이해가 안됐어요.

 

 페어 프로그래밍을 하다 보니 깨달은 건 내가 그래도 어느 정도의 프로그래밍을 하려면 CSS의 기본적인 문법과 쓰임새는 알아야겠다는 생각을 많이 하게 됐다. 그렇게 구조화된 CSS가 필요하게 된 이유를 살펴보며 제대로 된 이유를 알아보고자 한다.

 

 이제는 PC 환경만이 아닌 모바일이나 여러 전자 기기들의 등장으로 다양한 디스플레이를 보여줘야하고 반응형 형식으로 보여줘야 하기 때문에 CSS는 복잡하게 될 수밖에 없었다. 이러한 문제점들을 해결하기 위해 CSS 전처리기 개념이 등장했다. CSS 문서를 보면 color 값은 어떻게 주세요, margin 값은 이렇게 주세요, 하며 반복적인 작업을 거치기 일 수였다. 하지만 CSS 전처리기를 사용하게 되면 그에 맞는 컴파일러를 사용해 실제로 우리가 사용하는 CSS 문서로 변환된다.

 

저 중간이 CSS Preprocessor 출처 : 코드스테이츠

 

 이로 인해 CSS의 구조화는 원활히 이뤄졌고, 여러 작은 파일로 분리할 수 있는 방법이 생겼다. 하지만 SASS 라는 CSS 전처리기의 문제에서 보일 수 있 듯, 단순히 스타일이 겹치는 문제를 해결하기 위한 계층 구조 생성에 의지가 되었고, 용량이 너무 커 감당할 수 없는 지경까지 이르렀다. 그래서 CSS의 방법론이 총 4개 제시되었다.

• 코드 재사용
• 코드 간결화 → 유지보수 용이
• 코드 확장성
• 코드 예측

 모든 프로그램에는 완벽함이 없다는 말을 증명해주는 것처럼, 방법론에도 문제가 발생하기 시작했다. 방법론이 제기되면서 클래스명 선택자는 장황해지고 필요없는 마크업이 생겼으며, 재사용할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 했다. 또한 캡슐화의 개념이 없어서 유일한 클래스명을 선택하는 것이 최선의 선택이었다고 한다.

 

 그렇게 새로 생긴 것이 CSS-in-JS 인데, VSCode 에 Extension으로 Styled-Component 가 생겼다.

 

 

Styled-Component?

 React 기반 라이브러리고, 컴포넌트 기반 개발 환경에서 스타일링을 위해, 그리고 CSS의 성능 향상을 위해 탄생했다. 그래서 얘의 특징은

 

• Automatic critical CSS
  • 어떤 컴포넌트가 렌더링 되었는지 추척한 후 해당 컴퓨넌트에 대해 스타일을 자동 삽입
  • 어플 사용 시 최소 코드로만 화면이 보이도록
• No class name bugs
  • 스스로 className 생성
• Easier deletion of CSS
  • 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성 함께 삭제
• Simple dynamic styling
  • 수동 관리 필요 없이 전역 속성(React - props) 기반으로 스타일 속성 부여 → 간단하고 직관적
• Painless maintenance
  • CSS 파일을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다
• Automatic vendor prefixing
  • 개별 컴포넌트마나다 기존 CSS 이용하여 스타일 속성 정의