[TIL] Day37- Component Design

공부중인 개발자·2021년 6월 1일

CODESTATES React component

TIL

목록 보기

39/64

Achievement Goals

컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.

상향식(bottom-up) 방식
가장 작은 컴포넌트를 만들고 그 컴포넌트들을 조립하여 하나의 컴포넌트를 만드는 밑에서 위로 올라가는 방식

가장 작은 컴포넌트들은 재사용성을 가질 수 있게 만든 개발방법이
Component Driven Development (CDD)
부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.

컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.

Component Driven Development를 지원하는 도구 중 하나 Component Explorer (컴포넌트 탐색기) 가 등장
Component Explorer에는 많은 UI 개발도구가 다양하게 있는데 그중 하나가 Storybook

Storybook

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

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

구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.

구조화된 CSS가 필요한 이유

점점커지는 프로젝트의 규모와 복잡도 & 팀원 수의 증가
모바일이나 태블릿을 비롯한 다양한 디바이스의 등장

이러한 문제점들을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장
CSS 전처리기(CSS Preprocessor) 란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
하지만 이 CSS 전처리기(CSS Preprocessor) 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용

CSS 전처리기

SASS : Syntactically Awesome Style Sheets의 약자로 CSS를 확장해 주는 스크립팅 언어

CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능

단점 : 컴파일된 CSS의 용량의 증가

CSS 전처리기 문제를 보안하기 위한 방법론이 등장했고 방법론의 공통 지향점이 존재

코드의 재사용

코드의 간결화(유지보수 용이)

코드의 확장성

코드의 예측성(클래스 명으로 의미 예측)

대표적인 CSS 방법론 BEM

BEM :Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며, Block, Element, Modifier 각각은 —와 __로 구분
클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며 HTML/CSS/SASS 파일에서도 더 일관된 코딩 구조를 만들어 줌

문제점

클래스명 선택자가 장황해지고, 긴 클래스명 때문에 마크업이 불필요하게 커지며, 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 했음
SASS와 BEM도 고치지 못했던 몇 가지 문제들은 언어 로직 상에 진정한 캡슐화(encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)의 개념이 없다는 것이었고, 이로 인해 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없었음

컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔음
그러나 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 한번도 없었고 결국 CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생해서 이 문제를 정확하게 해결

CSS-in-JS에는 대표적으로 Styled-Component

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