Create an Addon
  • 소개
  • 설치
  • 상태 추적하기
  • 데코레이터
  • 프리셋
  • 카탈로그에 추가하세요
  • 결론
Framework:
React

상태 추적하기

애드온의 상태를 Manager와 Preview로 관리하기

리액트(React)는 상태를 관리하기 위해 useState 같은 내장된 이 있습니다. 일반적으로 이것으로 충분합니다만, 이 경우에는 상황이 조금 더 복잡합니다. 스토리북(Storybook)이 어떻게 설계되어 있는지를 이야기 해보겠습니다.

스토리북 구조의 기초

manager preview

표면적으로 스토리북은 통합된 UI를 보여줍니다. 그러나 내부적으로는, 커뮤니케이션 채널을 통해 소통하는 두 가지의 영역으로 나뉩니다.

  • A Manager: 스토리북의 검색, 네비게이션, 툴바, 애드온이 렌더링되는 UI 입니다.
  • Preview: 스토리들이 렌더링되는 iframe 입니다.

토글의 상태를 추적해야 하며 또한 Manager와 Preview 모두에서 해당 상태를 공유해야 합니다. 이를 위해서 useState 대신 @storybook/apiuseGlobals를 사용하겠습니다.

전역 상태 추적하기

전역은 스토리북에서 “전역” (스토리에 국한된 것이 아닌) 컨텍스트를 말합니다. 다양한 스토리와 애드온, 데코레이터 간 정보를 공유하기 편한 방법입니다. useGlobals 훅은 구축하고 있는 툴 내에서 전역 컨텍스트에 대한 접근할 수 있게 해줍니다.

더 많은 애드온 관련 API는 @storybook/addons를 통해 확인하세요.

애드온 키트는 전역을 사용하도록 을 사전에 설정합니다. 전역이 하는 역할을 보다 더 정확하게 반영하기 위해 전역의 이름을 변경해보겠습니다. toggleOutline 함수는 사용자가 아웃라인 애드온을 끄고 켤 수 있게 합니다. 👉🏽🔘

토글 상태를 추적하기 위한 툴

src/Tool.js
import React, { useCallback } from 'react';
import { useGlobals } from '@storybook/api';
import { Icons, IconButton } from '@storybook/components';
import { TOOL_ID } from './constants';

export const Tool = () => {
+  const [{ outlineActive }, updateGlobals] = useGlobals();

+  const toggleOutline = useCallback(
    () =>
      updateGlobals({
+        outlineActive: !outlineActive,
      }),
+    [outlineActive]
  );

  return (
    <IconButton
      key={TOOL_ID}
+      active={outlineActive}
      title="Apply outlines to the preview"
+      onClick={toggleOutline}
    >
      <Icons icon="outline" />
    </IconButton>
  );
};
Keep your code in sync with this chapter. View ffd9ccb on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
데코레이터
스토리와의 상호작용
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify