Component Driven Development

CDD

• Component Driven Development, 컴포넌트 단위로 개발하기
• 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식
• 컴포넌트의 재사용을 염두하고 개발하여, 같은 기능을 중복 개발하는 낭비가 없다
• Storybook: UI 개발 도구
• CSS의 변천사
  • CSS -> SASS -> BEM -> CSS Modules -> Styled Components
  • 프로젝트의 대형화, 복잡도 증가로 인하여 협업하는 팀원 수의 증가 등으로 일관성 있는 작업을 위한 구조화의 필요성이 대두
• CSS Preprocessor(CSS 전처리기): 구조화를 위한 도구, 각각에 맞는 compiler 필요
  • SASS: Syntactically Awesome Style Sheets, 전처리기 중 가장 유명한 스크립팅 언어, 장점보다 다른 문제점들이 더 많음(대표적으로 CSS용량의 비대화)
• CSS 방법론: BEM, OOCSS, SMACSS 등, 각각의 장단점이 있으나 공통 지향점을 가짐
  • 코드의 재사용, 간결화(유지보수 용이), 확장성, 예측성(클래스 명으로 의미 예측)
  • BEM: Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법
• CSS in JS: CSS를 컴포넌트 영역으로 불러들이는 방식, 대표적으로 Styled Component
  • Styled Component: funtional 혹은 상태(state)를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 단순한 패턴을 제공
    

Styled-component

• Styled-component: CSS-in-JS 관련 React library 중 가장 대중적임
• React component 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 개발됨
• Styled-component의 특징
  • Automatic critical CSS: window 상의 component가 렌더링 되었는지를 추적하여 해당하는 스타일을 자동으로 삽입, 최소한의 코드만으로 화면이 구성되도록 할 수 있음
  • No class name bugs: 스스로 유니크한 className을 생성, 중복이나 오타 방지
  • Easier deletion of CSS: 컴포넌트를 삭제할 경우, 연결된 스타일 속성도 같이 삭제
  • Simple dynamic styling: props나 전역 속성을 기반으로 스타일 속성을 부여해 간단하고 직관적임
  • Painless maintenance: 스타일을 상속하는 속성을 찾지 않아도 되어 코드가 커지더라도 유지보수가 어렵지 않음
  • Automatic vendor prefixing: 개별 컴포넌트별로 스타일 속성을 정의하면 알아서 처리해줌

useRef (for use DOM reference)

• React에서 DOM을 사용하는, 특히 DOM 엘리먼트의 주소값을 활용해야 하는 경우가 있다
• 아래와 같은 상황에서 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있게 해준다
  • focus
  • text selection
  • media playback
  • animation 적용
  • d3.js, greensock 등 DOM 기반 라이브러리 활용 시