[230418] Storybook 과 useRef

 * *  작성 중인 글입니다.  * *

---

🍀 오늘의 날짜 : 23년 04월 18일 
🍀 오늘의 주제 : 컴포넌트 UI 개발을 위한 Storybook + useRef

---

 

🔖 Storybook 이란? 

UI 개발 도구의 일종으로 Component Driven Development가 트렌드로 자리 잡으며 이를 지원하는 도구 중 하나인 Component Exploer (컴포넌트 탐색기) 가 등장합니다. Storybook은 이 도구의 UI 개발 도구 중 하나 입니다.

 

• 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업 할 수 있다. 
• 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인 할 수 있다. 
• 전체 UI를 한 눈에 보고 개발 할 수 있다. 
• 버그를 사전에 방지할 수 있다. 
• 테스트 및 개발 속도를 향상하는 장점이 있다. 
• 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다. 

 

주로 회사의 내부 개발자들을 위해 문서화 하여 회사 UI 라이브러리로써 사용하거나 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 주로 사용합니다. 

 

 

 

기본 설치 환경

1.

npx storybook@latest init

2.

npm run storybook

 

localhost:6006 으로 접근하여 Storybook 이 실행됩니다. 

 

 

 

 

ERROR 발생 

도데체가 props 설정하는 부분에 => 화살표 함수가 인식이 안 되는지를 모르겠음 도라방스..

는 오타 문제였다... Button.stories.js 파일에서 component : Button 이 아니라 button 이라고 쓰고,,, 

마지막에 스토리 만들 때, args 인자를 받고 ( )로 감싸야 하는데 { } 로 감싸버리기..

 

 

 

 

🔖 UseRef 란 

개발을 하다가 DOM 을 직접 건드려야 하는 상황에 사용하는 Hook 함수 

 

• focus
• text selection
• 애니메이션 적용 
• d3.js, greensock 등 DOM 기반 라이브러리 활용

 

위와 같은 상황에서 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조 할 수 있습니다. 다만 useRef 를 남용하는 것은 React 의 선언형 프로그래밍 원칙과 반대되기 때문에  조심해서 사용합시다. 

 

 

* 공식 문서 UseRef

* 벨로퍼트 useRef 

 

 

   useRef를 활용한 예제 1

 

 

*** 백스페이스를 꾹 눌러서 지우는 것은 한번 입력으로 인식이 됨 

*** 마지막에서 Shif가 자꾸 입력이 되는데 내 키보드 문제일까요..?

   ==> 맞춰야 하는 문자열이 gitHub 중간에 대문자가 있어서 Shift 도 같이 event.key 로 누적되었던 것.... 

1. 그래서 결국 useRef의 역할이 뭔데 
2. 선ㄷ언된 Ref.current는 ? 
3. null 주소 저장은 뭔데 
4. <div>의 ref ={..Ref}작성하는 이유는?
5. focus() 메소드
6. onKeyUP 뭐지 

 

 

   useRef를 활용한 예제 2