TIL 23.02.20

오늘은 CDD와 CDD개발도구, useRef에 대하여 공부하였다.

CDD

Component Driven Development를 뜻하며, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발,

재사용할 수 있는 UI 컴포넌트를 제작해 놓는 방식을 뜻한다.

 

 

Styled-Component

CSS의 일관적이지 않은 패턴 문제와 CSS를 컴포넌트 영역으로 불러오기 위한 CSS-in-JS의 대표적인 예시이며,

HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 가능

 

 

Styled-Component의 기능

 

1. 컴포넌트 만들기

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

3. Props 활용하기

4. 전역 스타일 설정하기

 

 

Storybook

Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구

 

Storybook에서 지원하는 주요 기능

1. UI 컴포넌트들을 카탈로그화하기

2. 컴포넌트 변화를 Stories로 저장하기

3. 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기

4. 리액트를 포함한 다양한 뷰 레이어 지원하기

 

 

스토리작성 예시

 

useRef

React는 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조 가능

 

useRef를 남용하는 것은 부적절하고,

React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용