StoryBook

• UI 컴포넌트 개발 도구

장점

• 어떻게 코드가 구현되었는지, App.js에 연결시키지 않아도 시각적으로 볼 수 있다.
• 코드를 수정하지 않고, StoryBook 내에서 변화를 실행할 수 있다.

설치

npm i @storybook/cli // storyBook 모듈 설치
npx storybook init // React 폴더에 storybook 적용
npm run storybook // StoryBook 실행

npm i prop-types // PropTypes 사용시 필요한 모듈
자동적으로 storyBook 설치시 devDependencies로 설치됨

• init 적용시 .storybook, src/stories 폴더 자동생성

• npm run storybook 실행시 StoryBook이 실행됨
• http://localhost:6006 포트에서 실행

작성

• 만들어야 할 것은 2가지이다.
• 사용하고 싶은 요소(버튼, 도형, ...)와 StoryBook 이용을 위한 stories 파일

요소

• 빨간색으로 박스친 부분이 포인트인데, 코드가 원하는대로 작동하는지 볼 수는 있다. (대소문자 주의)
• 설치했던 PropTypes을 사용해서 해당 parameter가 어떤 타입인지 작성한다. 예를 들어, string의 경우 StoryBook에서 수정하여 글씨가 어떻게 들어가는지 볼 수 있다.
• PropTypes.oneOf의 경우 어떤 조건을 넣을지 선택적으로 작성할 수 있다.

스토리

• 파일명은 컴포넌트명.stories.js로 작성한다. .storybook의 파일에서 수정 가능하다고 한다.

1. title = Storybook의 폴더 이름, component = 만들어서 사용할 요소
2. 템플릿을 사용하려면 필수적으로 필요한 코드인 것 같다. 자세하게는 모르겠다.
3. 만들어준 템플릿을 사용해서 export 해준다. 해당 이름이 StoryBook의 파일 이름이 된다.
4. component의 parameter의 값을 작성한다. 물론, StoryBook에서 수정 가능하다.

• 3, 4번은 하나만 만들어도 된다.

느낀점

• 우리 프로젝트에 적용하는 styled-componets를 사용하여 StoryBook를 적용하여 블로깅이 된 것이 없고, 대부분 TypeScript를 활용해서 나에게 필요한 자료를 찾는데 초반에 많이 헤맸다.
• styled-componets가 갖고 있는 장점이 있지만, parameter를 적용하려면 재 선언하여 사용해야 한다는 점과 parameter를 css에 적용 하는 것이 불가능 하다고 생각했지만 일단, 2가지의 경우에는 잘 적용 시킬 수 있었다. (흰-검이 배경, 글씨가 반전되는 형태)
• 확실히 배포단계에서는 불필요한 코드가 늘어나긴 하지만, 작업단계에서 app.js로 불러 일일히 확인을 하지 않아도 된다는 점에서는 이점이 크다. 또한, figma에서도 그대로 사용가능하다고 하니 프론트엔드 쪽에서 ProtoType 작성시에도 코드를 미리 작성한다는 이점이 있다.

참고

• StoryBook 소개
• Youtube - React Storybook Crash Course
• 해당 유튜브가 영어로 진행되지만, 코드를 작성하며 알려줘서 이해하기가 쉬웠습니다. 강력 추천합니다.

작성한 코드

//! NewButton.js
import styled from "styled-components"
import PropTypes from 'prop-types';

const Button = styled.button`
  width: 5.2em;
  height: 1.4em;
  border: 0.1em solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${props => props.color !== 'white' || "black"};
  color: ${props => props.color};
`

NewButton.propTypes = {
  label: PropTypes.string,
  color: PropTypes.oneOf(["white", "black"])
}

function NewButton({label, color}) {
  return(
    <Button color={color}>{label}</Button>
  )
}

export default NewButton

//! NewButton.stories.js
import NewButton from "../Atoms/NewButton"

export default {
  title: "Atoms", // storybook 폴더 이름
  component: NewButton
}

const Template = args => <NewButton {...args} />

// export: storybook 파일 이름 
export const White = Template.bind({})
export const Black = Template.bind({})


White.args = {
  label: "버튼",
  color: "white"
}

Black.args = {
  label: "button",
  color: "black"
}