Storybook 익히기 #1

스터디에서 좋은 사람들을 만나서, 프로젝트를 만들기로 했다.
디자인과 백엔드를 담당해주시는 분이 한 분 있고, 프론트는 나까지 두 명이다.
이번에 스토리북을 써보기로 해서,
디자인이 나오기 전까지 스토리북과 리덕스를 대략적으로 공부하고 있는데,
오늘 첫 날이라, 대략적인 정리를 해봐야겠다고 생각했다.
아직 디자인이 나오지 않아서 공식문서에서 제공하는 예제 파일을 조금 변경해서 공부하고 있다.
간단한 투두리스트를 만드는 것!

오늘 공부 한 파일 중 일부인 todo.js 파일이다.

// todo.js
const Todo = ({ todo: { id, title, state }}) => {
  return (
    <div className={`list-item ${state}`}>
      <label className="checkbox">
        <input
          type="checkbox"
        />
        <span className="checkbox-custom" />
      </label>

      <div className="title">
        <input
          type="text"
          value={title}
          readOnly={true}
          placeholder="Input title"
        />
      </div>

      <div className="actions" onClick={(event) => event.stopPropagation()}>
        {state !== "TODO_CHECKED" && (
          <a>
            <span className={`icon-star`}
            />
          </a>
        )}
      </div>
    </div>
  );
};

export default Todo;

todo.stories.js를 생성한다.
export default를 생성해서, 스토리북에게 우리의 컴포넌트가 무엇인지 알려주어야 한다.

// todo.stories.js
import Todo from "./Todo";

export default {
  component: Todo, // 스토리북아~! 참조해야 할 컴포넌트가 이거야
  title: "Todo", //  Storybook 앱의 사이드바에 나타날 컴포넌트 이름
};

1. 스토리는 주어진 state안에서 렌더링된 요소를 리던하는 함수다. 하나의 Template 변수를 만들어서, 확장 해 나가는 식이다.
2. 확장할때에는 bind함수를 사용한다
3. 인수(arguments) 또는 간단히 줄여서 args를 사용하여 컴포넌트를 수정한다. args의 값이 변하면 컴포넌트도 함께 변합니다.

Template 생성하기

// todo.stories.js
export default {
  component: Todo, 
  title: "Todo", 
};

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

bind 함수를 이용해서 확장하기!

export default {
  component: Todo, 
  title: "Todo", 
};

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

// 디폴트 먼저 생성
export const Default = Template.bind({});
Default.args = {
  todo: {
    id: "1",
    title: "Test Todo",
    state: "TODO_INBOX",
    updateAt: new Date(2022, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  todo: {
    ...Default.args.todo,
    state: "TODO_PINNED",
  },
};

export const Checked = Template.bind({});
Checked.args = {
  todo: {
    ...Default.args.todo,
    state: "TODO_CHECKED",
  },
};