UNIT3 [React] Custom Component

이번 유닛에서는 React로 프론트엔드를 구축할 때, 보다 구조적으로 코드를 작성하는 방법에 대해 배웠다.

Component Driven Development(CDD)

컴포넌트 주도 개발(CDD)은 컴포넌트 주위에 개발 프로세스를 고정하는 개발 방법론이다. 자세히 말하자면, 컴포넌트 수준에서 시작해 페이지나 화면 수준에서 끝나는 것으로 "바닥부터 끝까지"(bottom up) UI를 구축하는 과정을 말한다.

CSS in JS

CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말한다.

Styled Components

대표적인 CSS-in-JS 라이브러리로 Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크이다.
자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공한다.

Storybook

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