Skip to content

Latest commit

 

History

History
95 lines (67 loc) · 4.03 KB

스토리북.md

File metadata and controls

95 lines (67 loc) · 4.03 KB

스토리북

  • 스토리북은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 오픈 소스 도구로, 다양한 상태의 컴포넌트를 시각적으로 확인하며 작업할 수 있다. 리액트, 뷰, 앵귤러 등 여러 프론트엔드 프레임워크와 호환된다.
  • 스토리북을 사용하면 컴포넌트의 의존성을 분리하고, 각 컴포넌트가 어떻게 보여지고 작동하는지 빠르게 파악할 수 있기 때문이다. 이는 디자이너와 개발자 간의 협업을 강화하고, 컴포넌트 기반 개발을 통한 일관성 있는 UI를 구축하는 데 큰 도움이 된다.

스토리북 도입의 장점

  • 스토리북을 도입하면 컴포넌트의 재사용성과 유지보수성이 크게 향상된다. 컴포넌트를 독립적으로 개발하고 테스트할 수 있어, 프로젝트의 복잡성을 줄일 수 있다. 또한, 스토리북은 컴포넌트의 문서화를 자동화하여, 프로젝트에 참여하는 모든 팀원이 컴포넌트의 사용 방법과 옵션을 쉽게 이해할 수 있도록 돕는다.

피그마와 스토리북 차이

  • 피그마는 디자인 프로세스의 초기 단계에서 시각적인 인터페이스를 설계하고, 디자인 시안을 만들기 위해 사용된다. 이는 최종 제품의 UI/UX를 시뮬레이션하는 데 도움이 된다.
  • 스토리북은 실제 코드 기반의 컴포넌트를 개발, 문서화, 테스트하기 위해 사용된다. 이는 개발자가 컴포넌트를 독립적으로 관리하고, 일관성을 유지하며, 다양한 상태를 시각적으로 확인하고 검증하는 데 중점을 둔다.

재사용 예시

컴포넌트 (Button.js):

import React from "react";
import PropTypes from "prop-types";

const Button = ({ label, onClick, primary }) => {
  const className = primary ? "button-primary" : "button-secondary";
  return (
    <button className={className} onClick={onClick}>
      {label}
    </button>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  primary: PropTypes.bool,
};

Button.defaultProps = {
  primary: false,
};

export default Button;

스토리 (Button.stories.js)

import React from "react";
import Button from "./Button";

export default {
  title: "Example/Button",
  component: Button,
};

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Primary Button",
};

export const Secondary = Template.bind({});
Secondary.args = {
  primary: false,
  label: "Secondary Button",
};

export const Clickable = Template.bind({});
Clickable.args = {
  primary: false,
  label: "Clickable Button",
  onClick: () => alert("Button clicked!"),
};
  • 위의 예제에서 Button 컴포넌트는 label, onClick, primary 속성을 받아 다양한 스타일과 동작을 할 수 있다. Button.stories.js 파일에서 각기 다른 상태의 버튼을 정의하여 재사용 가능한 컴포넌트를 쉽게 관리하고 다양한 상태를 시뮬레이션할 수 있다.

결론

스토리북은 UI 컴포넌트의 개발과 테스트, 문서화를 지원하는 강력한 도구입니다. 컴포넌트 기반 개발의 효율성을 높이고, 프로젝트의 품질을 향상시키는 데 큰 도움이 됩니다.

왜냐하면 스토리북은 개발자가 컴포넌트의 다양한 상태를 쉽게 관리하고, 팀원 간의 소통을 강화할 수 있기 때문입니다.

따라서, UI 컴포넌트의 개발과 관리에 어려움을 겪고 있다면, 스토리북 도입을 고려해보는 것이 좋습니다.

이는 프로젝트의 성공 가능성을 높이고, 개발자의 작업 효율성을 극대화하는 첫걸음이 될 것입니다.

왜냐하면 스토리북은 컴포넌트 기반 개발을 위한 최적의 환경을 제공하기 때문입니다.

참고