저번 포스트에 이어 이번에는 간단하게 Storybook GUI를 간단하게 살펴본 후, 스토리가 무엇인지 설명하고 간단하게 스토리를 만들어 보도록 하겠습니다.
우선 사이드바에서 Button 을 클릭해 보겠습니다. 클릭하고 나오는 화면은 아래와 같을 겁니다.
아래의 Controls 부분은 신경쓰지 마시고 위의 Canvas에 Button UI가 나오는 것을 확인하시면 될 것 같습니다. Button 컴포넌트가 위에 그려져 있는것을 보실 수 있으실 겁니다. 다음으로 사이드바에 Primary 아래에 있는 Secondary , Large , Small 을 각각 클릭해 보고 확인해 볼까요?
각각 확인해 보시고 어떤 점을 느끼셨나요? Button 의 크기와 배경색, 글자색이 다르다는 것을 느끼셨을 거라 생각합니다. 네 맞습니다! 아주 눈썰미가 좋으시네요!
여기서 중요한 점이 하나 있다면, 그건 여러분이 확인하신 버튼들이 각각 존재하는 게 아니라 하나의 Button 컴포넌트에서 Style이 달라진 것입니다.
즉, 스토리(Story)란 "하나의 컴포넌트에서 특정 상태값들로 렌더링된 UI"입니다.
말이 어렵나요? 간단하게 말씀드리면, 특정 props 또는 state에 의해서 렌더링된 컴포넌트의 UI를 보여주는 것이라고 생각하시면 될 것 같습니다.
이를 구체적으로 코드로 확인해 볼까요? 자 그럼, 이전 포스트에서 만든 스토리북(Storybook)이 적용된 리액트 프로젝트 폴더에서 src 폴더 안에 있는 stories 폴더를 열어볼까요? 폴더를 확인해 보시면 Button 과 관련된 파일은 Button.jsx , button.css , Button.stories.jsx 3개가 있는 것을 확인하실 수 있으실 겁니다.
.jsx 파일은 Button 컴포넌트에 대해 정의하는 파일, .css 파일은 Button 컴포넌트의 스타일을 정의하는 파일이라는 것은 쉽게 알 수 있으실 겁니다. 그런데 .stories 파일이 있네요. 이 파일이 컴포넌트의 스토리를 정의하는 파일입니다. 파일에 저장되어 있는 코드를 한 번 살펴보겠습니다.
위에서 부터 하나씩 살펴보면, import 를 통해 컴포넌트 파일을 불러오는 것을 확인 하실 수 있습니다. 다음으로 export default 에서 객체의 property로 title , component , argTypes를 정의하는 것을 보실 수 있습니다. title 같은 경우 사이드 바에서 어떻게 표시 될지 정하는 부분이라고 생각하시면 됩니다. 다음으로 component는 여러 스토리를 정의할 컴포넌트는 어떤 것인지 정하는 부분입니다. 마지막으로 argTypes 이 무엇인지 확인 하기 위해 우선 Button 컴포넌트를 정의한 Button.jsx 파일을 한 번 열어보도록 하죠. 여기서 확인 하셔야 할 것은 props로 어떠한 것들을 정의했는지 입니다. 함수형 컴포넌트의 매개변수에는 컴포넌트에서 받는 props가 들어가게 되죠. 아래의 Button.jsx 에서는 매개변수로 받는 props 객체를 구조분해 할당 문법으로 표시한 것을 아실 수 있으실 겁니다.
위의 이미지에서 Button 컴포넌트가 어떤 props 를 받는지 확인하셨다면,
처음에 신경 쓰시지 말아달라고 말씀드린 Controls 패널 부분을 확인해 보도록 하겠습니다.
무엇을 확인하셨나요? 네 그렇습니다! 컴포넌트의 props 와 Controls 패널 부분이 동일 하신 것을 확인 하셨을 겁니다.
왼쪽에 있는 것이 props 객체의 key 오른쪽에 있는 것이 value라고 생각하시면 됩니다. 스토리북의 장점이 여기서 하나 더 나오게 되는데, 바로 이 value 값을 코드가 아닌 브라우저 상에서 변경이 가능하다는 것입니다. 확인하기 위해, backgroundColor를 한 번 변경해 보도록 하겠습니다.
제가 위에 박스친 부분에서 Choose color 부분은 클릭해 보시면 Color picker가 나오고 마음에 드시는 Color를 클릭 하시게 되면, backgroundColor 부분에 선택하신 Color가 들어가게 되고, Canvas의 Button backgroundColor 가 변경 되신 것을 보실 수 있으실 겁니다. 아래의 사진처럼 말이죠.
그럼 여기서 backgroundColor의 value에 어떻게 Color picker가 나오게 되었는지 궁금해 하실 것 같은데요. 그건 바로 export default 하는 객체 안의 argTypes에서 backgroundColor의 control을 color로 설정했기 때문입니다. 즉, value를 변경할 수 있는 방식을 여러가지로 설정할 수 있다는 건데요. 이 부분에 대해서는 공식문서를 참조하실 수 있도록 링크를 남겨드리도록 하겠습니다.
자, 이제 그러면 Button.stories.jsx 파일을 이어서 계속 살펴보도록 할까요?
그 다음 아래에 보시면 Template 함수와 export 하는 변수 4개가 있는 것을 확인하실 수 있으실겁니다. 우선 Template을 보시면 arg를 매개변수로 받아 Button 컴포넌트에 args를 spread operator로 뿌려 주는 것을 알 수 있습니다. 여기서 args는 props의 역할을 대신하신다고 생각하시면 됩니다. bind 메서드를 통해 새로 생긴 함수를 export 하게 되고 이 함수 객체에 저희가 주고 싶은 args를 설정하게 되면, Button 컴포넌트에 저희가 원하는 props가 들어가게 되는 로직이라고 보시면 될 것 같습니다.
중요한 것은 이렇게 args를 정의 후, export 하는 각각의 함수가 바로 스토리(Stroy)라는 것이죠!!
이렇게 스토리 파일을 살펴보면서 하나의 컴포넌트에서 보여지는 여러 스타일들을 스토리로 정의할 수 있을 뿐만 아니라 GUI 환경에서 Controls 패널을 활용해 args 값을 변경해, 빠르게 변경사항을 확인해 볼 수 있다는 점을 오늘 확인 하실 수 있으셨을 겁니다.
다음 포스팅 에서는 스토리를 작성하는 방법에 대해 살펴보도록 하겠습니다!
