UI개발할때 항상 내부의 기능과 연결이 되어있으면 코드의 유지보수가 어려운데 storybook을 사용하면 isolation이 되서 UI만 따로 구성할 수 있는 장점이 있다. UI컴포넌트들을 생성하고, 그 컴포넌트들을 사용하면 끝!
동작하는 방식은 yarn으로 설치를 하고 나만의 stroybook을 로컬에 띄우고 UI를 컴포넌트 별로 생성하고 관리하면 된다. 스토리북을 처음에 동작시키면 아래와 같이 브라우저에 표시가 되는데
내가 만약 UI 컴포넌트 별로 여러개의 UI를 만든다면 아래와 같이 구성이 된다. story에는 내가 작성한 코드들이 들어있고, 버튼을 누를때 action이 있다면 actions에 표시가 된다.
https://storybook.js.org/docs/basics/introduction/
https://storybook.js.org/docs/basics/introduction/
Introduction Edit this page Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
storybook.js.org
스토리북에 대해서 학습하고 싶으면 아래 튜토리얼을 따라해보자.
https://www.learnstorybook.com/
Storybook Tutorials
Learn Storybook teaches frontend developers how to create UIs with components and design systems. Our free in-depth guides are created by Storybook maintainers and peer-reviewed by the open source community.
www.learnstorybook.com
Airbnb에서도 다음과 같이 자신만의 stroybook을 만들어서 운영하고 있다.
https://airbnb.io/react-dates/?path=/story/drp-calendar-props--open-up
Storybook
airbnb.io
이렇게 UI 컴포넌트 별로 생성해서 프로젝트에서의 의존성을 줄이는게 좋을것 같다는 생각!
'우리는 개발자 > Web' 카테고리의 다른 글
| React Routing 처음 구조 잡을때 참고하면 좋은 사이트 (0) | 2019.12.20 |
|---|---|
| React 를 시작하다. (0) | 2019.12.20 |