Component Driven Development(CDD)
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발
부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행
Component Explorer (컴포넌트 탐색기)
각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발
Storybook
Storybook은 기본적으로 독립적인 개발환경에서 실행됩니다. 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발 할 수 있다
회사의 내부 개발자들을 위해 문서화(documentation)를 하여 회사의 UI 라이브러리로써 사용하거나, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로 사용
주요기능
- UI 컴포넌트들을 카탈로그 화하기
- 컴포넌트 변화를 Stories로 저장하기
- 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
- 리액트를 포함한 다양한 뷰 레이어 지원하기
프런트엔드 앱의 3가지 양상 : 자동화된 테스트 (Jest), 컴포넌트 개발 (Storybook), 그리고 앱 그 자체
회사에서 사용하는 UI 라이브러리를 내부 개발자들을 위해 문서화하는 UI 개발도구가 맞습니다.
컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 만들어볼 수 있습니다.
Storybook은 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구입니다.
UI 라이브러리로 활용하기 때문에 애플리케이션과 독립적인 개발 환경에서 실행됩니다. 굳이 애플리케이션을 탐색하지 않아도 Storybook을 통해 전체 UI에 대한 파악을 한눈에 할 수 있습니다. 이러한 장점으로 외부에 공개하기 위한 기본 플랫폼으로도 활용할 수 있습니다.
CSS의 구조적인 작성 방법의 발전
CSS -> SASS -> BEM -> CSS Modules -> Styled Components
구조화된 CSS가 필요하게 된 이유: 점점 커지는 프로젝트의 규모와 복잡도, 팀원 수의 증가, 모바일 또는 태블릿을 비롯한 다양한 디바이스의 등장
CSS 전처리기(CSS Preprocessor): 구조적 작성을 위한 도구, 전처리기에 맞는 Compiler를 사용해 컴파일하면 실제로 우리가 사용하는 CSS 문서로 변환됨
SASS(Syntactically Awesome Style Sheets): CSS 전처리기 중 가장 유명, CSS를 확장해 주는 스크립팅 언어
자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능을 가졌습니다. 그래서 SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기(preprocessor)의 역할
장점보다 다른 문제들을 더 많이 만들어낸다, 전처리기(preprocessor)가 내부에서 어떤 작업을 하는지는 알지 못한 채, 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어 내는 것에 의지하게 되었고, 그 결과 컴파일된 CSS의 용량은 어마어마하게 커지게 되었음
CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두
방법론의 공통 지향점
- 코드의 재사용
- 코드의 간결화(유지보수 용이)
- 코드의 확장성
- 코드의 예측성(클래스 명으로 의미 예측)
여러 팀원이 함께 작업하는 상황에서 CSS 작성에 있어서 방법들을 규칙으로 정해두는 것은 매우 중요한 요소
BEM이란 Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며, Block, Element, Modifier 각각은 와 --로 구분, 재사용, 더 일관된 코딩 구조의 장점
문제점, 클래스명 선택자가 장황해지고, 이런 긴 클래스명 때문에 마크업이 불필요하게 커지며, 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 함, 언어 로직 상에 진정한 캡슐화(encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)의 개념이 없음
Styled Component
CSS in JS 관련 React 라이브러리 중 가장 인기, JavaScript에서 변수를 선언하듯이(혹은 React 에서 컴포넌트를 만들듯이) Button 을 만들고, tag 의 속성을 정의하고 (여기서는 a tag), back-ticks ( )안에 기존 CSS 문법을 이용하여 스타일 속성을 정의해 주는 것 뿐입니다.
const Button = styled.a display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem;;
만드려는 컴포넌트의 이름과 사용하려는 tag 를 styled.tag 로 정의 후 back-tick( ) 안에 스타일 속성을 정의하면 됩니다.
기존 컴포넌트의 스타일 속성을 상속받아 새로운 컴포넌트를 만들 때에는 기존 컴포넌트를 styled() 로 감싼 뒤 변경하고 싶은 속성만 새로 정의해 주면 됩니다.
컴포넌트 정의 시 상황(새로운 컴포넌트 생성 or 기존 컴포넌트 상속)에 따라 온점 . 또는 () 중 하나만 사용해야 합니다.
props 를 통해 스타일 속성을 전달하는 것이 가능하며, 함수를 사용하여 props 를 통해 전달받은 속성을 사용하거나 default property 를 사용할 수도 있습니다.
Styled-Components 에서 스타일 속성 정의 시 CSS3의 문법을 그대로 사용할 수 있습니다.
스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수도 있습니다.
상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다.
별도의 className 을 지정해 주지 않아도 Styled-Components 가 각 태그마다 유니크한 클래스 이름을 생성해 줍니다.
다른 컴포넌트에게 영향을 주지 않기 때문에 생성, 수정, 삭제가 자유롭습니다. 코드를 구성하는 원칙은 "의존성(dependency)이 낮고 응집성이 높게 만드는 것"인데 CSS-in-JS를 활용해서 의존성을 낮출 수 있습니다.
CSS가 특정 컴포넌트에 종속되기 때문에 className 이 겹치는 등의 부작용이 없어서 협업 뿐만 아니라 유지보수에도 용이합니다.
기존 방식은 전체 페이지에 필요한 CSS를 모두 처음부터 로딩해서 style 태그를 생성했지만, CSS-in-JS는 그때 그때 필요한 만큼만 style 태그를 생성합니다. 즉, 전체 페이지에 필요한 CSS를 모두 로딩한다는 부분이 잘못된 설명입니다.
CSS-in-JS 라이브러리들 종류에는 styled-components, glamorous, aphrodite 등이 있으며 그 중 가장 인기있는 라이브러리가 styled-components 입니다.
Styled Component 의 특징
Automatic critical CSS
Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.
No class name bugs
Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.
Easier deletion of CSS
기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.
Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.
Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.
Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.
Adapting based on props & Extending Styles
Styled Component 는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수도 있습니다
또한 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇 개의 컴포넌트에는 약간의 변화를 주고 싶은 경우도 있을 것입니다. 이때에는 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다.
useRef
DOM reference를 활용, DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 중요
- focus
- text selection
- media playback
- 애니메이션 적용
- d3.js, greensock 등 DOM 기반 라이브러리 활용
useRef는 DOM 엘리먼트의 특정 메소드를 활용해야 할 때 자주 사용됩니다. React에서 DOM 엘리먼트에 직접 접근하여 메소드를 이용할 방법이 제한적이기 때문입니다.
useRef의 초기값(useRef의 첫 번째 인자)에는 어떤 참조 자료형도 할당할 수 있습니다만, DOM 엘리먼트나 React 엘리먼트의 주소값을 할당하여 사용하는 경우가 더 많습니다.
대부분의 경우 애플리케이션에서 변화하는 값은 useState로 state로 지정하여 이용해야 합니다. useRef의 리턴값은 변화되어도 컴포넌트가 재렌더링이 되지 않기 때문입니다.
ref 속성을 활용해서 DOM 엘리먼트, React 엘리먼트의 주소값을 useRef의 리턴값에 전달할 수 있습니다.
