Storybook

alajillo·2021년 10월 9일
0

React

목록 보기
10/12
post-thumbnail

StoryBook

스토리 북은 UI컴포넌트를 데이터로 관리해주는 라이브러리이다.

이런 식으로 UI컴포넌트를 폴더 별로 모아서 따로따로 관리할수 있고 밑에 Control 부분에서 컴포넌트에 전달되는 props들을 변경해서 바로바로 데이터에 의한 UI변경을 즉각적으로 확인 할수 있다.

코드 구조

// in Box.stories.js
import React from 'react'
import  Box  from '../components/Box'

export default {
  title: 'Example/Box', 
  component : Box,
  argTypes : {
    backgroundColor: {
      control : {
        type : 'color'
      } 
    }
  }
};

const Template = (args) => <Box {...args} />

export const Default = Template.bind({})

export const royalBlue = Template.bind({})
royalBlue.args = {
  backgroundColor : 'royalBlue'
}

export const yellow = Template.bind({})
yellow.args = {
  backgroundColor : 'yellow'
}

export default

사용하고 싶은 컴포넌트를 가져온다.
export defualt로 객체를 반환하는데 속성으로는 title, component등 여러가지 옵션이 있다.
여기서 title에 들어가는 것은 폴더이름 과 구조을 나타낸다.
Example/Box 로 설정을 하면 Example 폴더에 Box폴더가 들어가 있다.
만약 Box 로만 설정을 하면 Example 폴더와 동일한 깊이에서 Box라는 카테고리가 생성된다.

Template

Template이라는 JSX를 반환하는 함수를 만든다. 이때 인자로 args를 받아서 컴포넌트의 props로 전달해준다.
이렇게 Template가 만들어지면 예시를 만들어주는데 이때 Template.bind를 이용해서 this를 빈 객체 {} 로 지정해서 함수로 다시 반환한 것을
예시의 이름으로 받아서 예시를 구성한다.
예시를 구성했으면 .args를 이용해서 props로 사용될 인자들을 전달한다.

근데 왜 bind로 빈 객체를 this로 설정 할까?

storybook의 내부로직 떄문에 그런줄 알고 bind의 객체를 전달하지 않거나 bind를 안써도 정상적으로 동작한다.

export const royalBlue = Template
royalBlue.args = {
  backgroundColor : 'royalBlue'
}

export const yellow = Template.bind()
yellow.args = {
  backgroundColor : 'yellow'
}

아마 인자를 두번째 속성으로 전달하는 다양한 방식으로 사용될 목적으로 예시를 만들어서 그런 것 같다.

control

argTypes : {
    backgroundColor: {
      control : {
        type : 'color'
      } 
    }
  }

export defualt 로 내보내는 객체 안에 이런 속성이 들어 있는데 이거는 storybook의 특징중 하나인 데이터를 조작해서 UI를 즉각적으로 변경할수 있도록 도와주는 옵션이다.
argTypes 내부에 props로 전달된 값들을 넣고 그 안에 control속성을 이용해서 값을 조절할수 있도록 한뒤 안에 type에 number,color,string등 다양한 값을 넣을수 있다.

control 속성이 있어야 값을 바꿀수 있을까?

답은 아니다.
.args를 통해서 props를 설정해서 다양한 예시를 만든 컴포넌트의 경우 기본적으로 이를 감지해서 값을 변경할수 있도록 control을 할수 있도록 설정된다.

결론

아직은 storybook을 어디에 쓸지는 감이 잘 안오지만 아마 data중심의 UI를 구축할때 도움이 많이 될 것 같은데 정확히는 직접 프로젝트에 사용해봐야 감이 올 것 같다.

profile
Developer's High

0개의 댓글