프로젝트 리팩토링 중 스토리북을 알게 되었고, 컴포넌트의 문서화 및 테스팅의 용이성, 그리고 회사들의 모집 공고에서 스토리북도 하나의 기술 스택으로 요구되는 것을 보아 사용해보기로 하였다.

스토리북 공식 문서에 정리되어있는 튜토리얼을 따라해보고 간단하게 스토리를 만들어보는 것 까지는 가능했다.

이 과정에서 든 의문점은 다음과 같다.

1. Template과 args는 정확히 무엇인지?

2. 스토리북에서 controls로 임의로 데이터를 조작하는 것 외에 데이터를 연결하는 법은?

블로그를 통해 해결한 점

• Template

  공식문서를 보면 " Template.bind({})는 함수의 복사본을 만드는 표준 JavaScript의 한 기법 " 이라고 소개되어 있다. 하나의 컴포넌트로 다른 args값을 가지는 복수의 스토리를 만들기 위해서 사용되는 기법이다. (복수의 스토리를 만들게 아니라면 template를 안써도 되는 것 같다.)

• args

  스토리의 props이자 controls에서 임의로 데이터 조작 가능하다.

• 데이터 연결

  진행중인 프로젝트에선 recoil을 사용중이며 스토리에서 recoil을 사용하려면 컴포넌트에 <RecoilRoot>을 감싸줘야만 한다. 처음엔 이를 해결하기 위해서 Template안에 <RecoilRoot>을 감싸주었지만, 전역으로 사용하기 위해 preview.js의 decorators에 넣어주는 방식이 있다는 것을 알았다.

추가적으로 addon과 parameter, decorators에 대해서도 알게되었고, 리팩토링 진행 중 사용의 필요성이나 의문점을 느끼게 된다면 따로 정리해보는 시간을 가져보아야 할 것 같다.

참고 문헌

1. Storybook addon 정리 블로그 - https://velog.io/@velopert/start-storybook#2-2-actions-%EC%95%A0%EB%93%9C%EC%98%A8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

2. Storybook 활용 정리 블로그 - https://velog.io/@juno7803/Storybook-Storybook-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0#-%EB%8B%A4%EC%8B%9C-story%EB%A5%BC-%EC%9E%91%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

3. Storybook에 외부 라이브러리 적용 정리 블로그 -
   https://velog.io/@baby_dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%99%80-%ED%95%A8%EA%BB%98-%ED%95%98%EB%8A%94-Storybook-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0?ref=codenary#storybook-with-recoil