* * 이 글은 작성중입니다. * *
오늘 날짜: 2023년 4월 18일
오늘의 주제: 컴포넌트 UI 개발을 위한 스토리북 + useRef
스토리북이란?
UI 개발 도구의 일종으로 Component Driven Development가 대세를 이루고 있으며 이를 지원하는 도구 중 하나인 Component Explorer가 등장하고 있습니다. Storybook은 이 도구의 UI 개발 도구 중 하나입니다.
- 각 구성요소는 별도로 볼 수 있도록 구성되어 있어 한 번에 한 구성요소씩 작업할 수 있습니다.
- 구성 요소를 자동으로 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있습니다.
- 전체 UI를 한눈에 보고 개발할 수 있습니다.
- 버그를 사전에 예방할 수 있습니다.
- 테스트 및 개발 속도를 높일 수 있는 장점이 있습니다.
- 종속성에 대한 걱정 없이 애플리케이션을 구축할 수도 있습니다.
주로 회사 내부 개발자를 위해 문서화하여 회사 UI 라이브러리로 사용하거나, 외부 공개를 위한 디자인 시스템 개발을 위한 기본 플랫폼으로 사용합니다.
기본 설치 환경
1.
npx storybook@latest 초기화
2.
npm 실행 스토리북
Storybook은 localhost:6006에 접속하여 실행됩니다.
오류 발생
도데체 소품설정 => 화살표 기능이 인식이 안되는지 모르겠네요 도라벤스..
미해결
UseRef 필드
개발하는 동안 DOM을 직접 터치해야 하는 상황사용되는 후크 기능
- 집중하다
- 텍스트 선택
- 애니메이션 적용
- d3.js, greensock 등 DOM 기반 라이브러리 활용
위의 상황에서 useRef 를 사용하여 DOM 노드, 요소 및 React 구성 요소 주소를 참조할 수 있습니다. 하지만 useRef를 과도하게 사용하면 React의 선언적 프로그래밍 원칙에 위배되므로 주의하세요.