REACT 컴포넌트 디자인, CDD, Storybook, useRef, Styled-Component

---

CDD(Component Driven Development)  ✔️

 

개발 방법 중의 하나로, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다.

CDD가 트렌드가 되면서, 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다.

 

Storybook  ✔️

 

UI 개발 // Component Driven Development를 하기 위한 도구다.

 

각각의 컴포넌트들을 따로 볼 수 있어, 전체 UI를 한눈에 보고 개발할 수 있다.
재사용성을 확대하기 위해 컴포넌트를 문서화한다.

자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다.

사전에 버그를 방지하며 테스트 및 개발 속도를 향상한다.
기본적으로 독립적인 개발환경에서 실행되기 때문에 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.

 

주요 기능 

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

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

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

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

Yarn ?

yarn이란 facebook에서 만든 새로운 자바스크립트 패키지 매니저.
기존에 존재하는 npm과 동일한 기능

YARN 설치하기

macOS 사용자

• Homebrew를 사용하여 설치한다.
• $ brew install yarn
• NVM같은 버전 관리 툴을 사용한다면 Node.js를 제외하고 설치.
• $ brew install yarn --without-node
• $ yarn --version 을 통해서 잘 설치되어있는지 확인.
  
  

Windows 사용자

• Chocolatey를 사용하는 설치.
  
  • $ choco install yarn
• Scoop 를 사용하는 설치.
  
  • $ scoop install yarn
• NPM 으로 설치
  
  • $ npm install -g yarn
• Path 설정해주기
  
  • $ export PATH="$PATH:/opt/yarn-[version]/bin"

 

Styled-Component  ✔️

 

(Css-in-JS): 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리

 

CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없다.
but, 빠른 페이지 로드에 불리하다.

다른 컴포넌트에 영향을 주지 않기 때문에, 생성, 수정, 삭제가 자유롭다.

CSS가 특정 컴포넌트에 종속되기 때문에 className이 겹치는 부작용이 없어서 유지보수에 용이하다.

기본 방식은 전체 페이지에 필요한 CSS를 모두 처음부터 로딩해서 style 태그를 생성했지만
CSS-in-JS는 그때마다 필요한 만큼 style 태그를 생성한다.

Styled-Component 에서 스타일 속성 정의 시 CSS3의 문법을 그대로 사용 가능하다.
스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props를 사용할 수 있다.

상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled( )로 감싼 뒤
변경하고 싶은 속성만 새로 정의해주면 기존 속성을 확장하여 사용할 수 있다.

만들려는 컴포넌트의 이름과 사용하려는 tag를 styled.tag로 정의 후 백 틱(`) 내부에 스타일 속성을 정의하면 된다.
컴포넌트 정의 시 상황(새로운 컴포넌트 생성 or 기존 컴포넌트 상속)에 따라 온점 . 또는 ( ) 하나만 사용해야 한다.

 

useRef  ✔️

 

DOM reference를 잘 활용할 수 있다.

focus / text selection / media playback / 애니메이션 적용 / DOM 기반 라이브러리 활용 

위와 같이 DOM 엘리먼트의 주소 값을 활용하는 경우는 useRef를 자주 사용한다.
DOM 엘리먼트의 특정 메소드를 활용할 때 자주 사용되는 이유는 React에서 DOM 엘리먼트에 직접 접근하여 메소드를 이용할 방법이 제한적이기 때문이다.

useRef의 초기값(useRef의 첫 인자)에는 어떤 참조 자료형도 할당할 수 있다.
(하지만 DOM 엘리먼트나 React 엘리먼트의 주소 값을 할당하여 사용하는 경우가 더 많다)

useRef의 리턴 값은 변화되어도 컴포넌트가 재 렌더링이 일어나지 않는다.
ref 속성을 활용해서 DOM 엘리먼트, React 엘리먼트의 주소 값을 useRef의 리턴 값에 전달할 수 있다.

 

---