[Vue] storybook - knobs 적용하기

storybook 및 knobs addon 설치 과정은 생략한다.

 

knobs는 컴포넌트의 props 프로퍼티를 동적으로 설정해볼 수 있게 해주는 애드온이다.

 

1. 기본 사용법

객체가 아닌 경우, text, number, array 등으로 변경하여 적용한다.

import { withKnobs, object } from "@storybook/addon-knobs";

storiesOf("스토리명", module)
  .addDecorator(withKnobs)
  .add("서브스토리", () => {
    return {
      props: {
        myProps: {
          type: Object,
          default: object("my props", {
            // 컴포넌트에 전달할 props
            // 값이 knobs 탭에 표시되며 수정에 따라 화면이 반응한다.
          }),
        },
      },
      // ... 이하 생략 ...
    };
  });

주의: addDecorator(withKnobs)를 누락하면 스토리 이동 시 knobs가 초기화 되지 않고 계속 유지되는 현상이 발생한다.

 

 

2. 그룹핑

props 정보 중 성격이 비슷한 것들끼리(또는 원하는 것들끼리) 모아 볼 수 있게 해주는 기능이다.

키를 하나 추가하고 그룹명을 지정하면, knobs 화면 내에 지정한 그룹명 탭이 추가된다.

props: {
  myProps: {
    type: Object,
    default: object("Props for data", {

    }, "그룹명"), // knobs 내에 탭으로 표시된다.
    styles: object("Props for styles", {

    }, "그룹명2"),
  }
}

 

 

3. props가 없는 컴포넌트에 대해 테스트 해보기

스토리에는 컴포넌트 A만 존재하고 A의 하위에 위치한 컴포넌트 B, C의 props가 A에 의해 전달되는 것이 아닌 경우,

B, C에게 전달해줄 props를 바로 설정할 수 없다.

이런 경우에는 mounted와 watch를 활용하여 구현할 수 있다.

{
  props: {
    ...knobs에서 컨트롤할 props 설정...
    /* 예시
    myProps: {
      type: Boolean,
      default: boolean("myProps", true),
    },
    */
  },
  mounted() {
    ...하위에 위치한 컴포넌트에 접근하여 값을 주입...
    /* 예시
    this.$refs["subComponent"].propsOfSub = this.myProps;
    */
  },
  watch: {
    ...props 변경 시 하위에 위치한 컴포넌트의 값을 재 설정...
    /* 예시
    myProps: function(val, oldVal) { // this 접근을 위해 arrow 대신 function 사용
      this.$refs["subComponent"].propsOfSub = value;
    },
    */
  },
  ...
}