들어가기에 앞서
참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
스토리북을 사용하는 주요 목적
스토리북을 사용하는 목적은 여러가지가 있겠으나, 제가 생각하는 주요 목적은 컴포넌트 테스트 및 문서화입니다. 스토리북을 사용하면 컴포넌트를 독립적으로 테스트할 수 있으며, 각각의 스토리는 특정 상황이나 상태에서 컴포넌트가 예상대로 작동하는지 확인할 수 있습니다. 또한, 각각의 스토리는 특정 컴포넌트의 사용법, 속성 등을 문서화여 보여줄 수 있습니다.
이를 통해 시각적으로 컴포넌트를 테스트하고 디자인의 일관성을 유지할 수 있는 이점을 누릴 수가 있습니다.
기본적인 스토리 작성 방법
스토리북은 공식 문서에서 언급하길 CDD방법론을 따릅니다. 작은 컴포넌트(버튼, 텍스트 등)부터 작성하여 점차적으로 복잡한 컴포넌트를 개발하는 상향식 개발방식으로, 처음엔 러프한 디자인으로 틀을 잡고 조금씩 원하는 로직을 수행하는 컴포넌트를 리팩토링을 거쳐 구현하는 방식이 TDD 방법론과 유사하다고 할 수 있습니다.
스토리를 작성하는 방법은 아래 스토리 코드를 예시로 설명해보겠습니다.
import React from 'react'
import { View } from 'react-native'
import { Meta, StoryFn } from '@storybook/react'
import {
AnimatedRandomSelector,
Props,
} from '../components/animatedRandomSelector'
export default {
title: 'Components/RandomItemSelect',
component: AnimatedRandomSelector,
argTypes: {
onPress: { action: 'pressed the button' },
},
tags: ['autodocs'],
decorators: [
Story => (
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Story />
</View>
),
],
} as Meta
export const Basic: StoryFn<Props> = args => (
<AnimatedRandomSelector {...args} />
)
Basic.args = {
items: [
{
place_name: 'Restaurant 1',
},
{
place_name: 'Restaurant 2',
},
{
place_name: 'Restaurant 3',
},
],
onIndexChange: () => {},
itemHeight: 50,
}
TypeScript
복사
위 코드는 넘겨받은 데이터 중에서 랜덤으로 하나를 선택해서 보여주는 AnimatedRandomSelector 컴포넌트에 대한 스토리입니다. 더미 데이터로 ‘Restaurant 1, Restaurant 2, Restaurant 3’ 를 넘겨주었으며, 그 결과 아래와 같이 애니메이션이 실행되는 모습을 확인할 수 있었습니다.
스토리의 각 항목에 대한 설명
1.
title: 'Components/RandomItemSelect': 스토리북 UI에서 컴포넌트가 표시될 경로를 지정합니다. 이 경우 "Components" 폴더 아래의 "RandomItemSelect" 항목으로 표시됩니다.
2.
component: AnimatedRandomSelector: 스토리북에서 다룰 컴포넌트를 지정합니다. 여기서는 AnimatedRandomSelector 컴포넌트를 사용합니다.
3.
argTypes: 컴포넌트의 인수를 정의하고, 액션을 설정합니다. onPress는 버튼을 눌렀을 때의 동작을 정의하며, 'pressed the button'이라는 이름으로 액션을 생성합니다. 이는 스토리북 액션 패널에서 버튼 클릭 이벤트를 모니터링할 수 있게 합니다.
4.
tags: ['autodocs']: 이 스토리에 'autodocs' 태그를 추가합니다. 이는 자동으로 문서를 생성하는 데 사용될 수 있습니다. 그러나, 현재 버그 때문에 제대로 생성이 안 됩니다.
5.
decorators: 스토리를 감싸는 데코레이터를 정의합니다. 여기서는 Story 컴포넌트를 중앙에 정렬하고, flex: 1 스타일을 적용한 View로 감싸서 중앙 정렬된 레이아웃을 만듭니다.
6.
StoryFn은 Storybook에서 사용하는 타입입니다. 이는 스토리를 정의하는 함수를 나타냅니다.
스토리는 특정 컴포넌트의 상태를 시각화하는데 사용되며, StoryFn은 이러한 스토리를 생성하는 함수를 나타냅니다.
마지막으로, export default { ... } as Meta 구문은 위의 설정들을 내보내며, 이를 통해 스토리북이 이 설정을 읽고 해당 컴포넌트의 스토리를 생성할 수 있습니다.
