Storybook useArgs 활용하기

 

📌 예시 살펴보기

스토리북을 사용하다보면 control prop을 이벤트 핸들러와 동기화시키고 싶은 경우가 있습니다.

예시를 위해 지도 컴포넌트가 있고, 마커 클릭 시 활성화되는 마커 ID 가 변경된다고 하겠습니다.

이 컴포넌트는 다음과 같은 스토리를 가질 것입니다.

 

import { Map } from './map'

const meta = {
    component: Map
}

export default meta

const mock = [
    { id: '1', poi: {/** some data */} },
    { id: '2', poi: {/** some data */} },
    { id: '3', poi: {/** some data */} },
    // ...
]

const options = mock.map((option) => option.id)

export const BasicStory = {
    render: (args) => <Map {...args} />,
    argTypes: {
        activeId: {
            control: 'select',
            options,
        }
    },
    args: {
        activeId: options[0],
        pois: mock,
    }
}

 

실행해보면 control panel 에서 activeId 를 변경할때와 달리 지도 마커를 직접 클릭할 경우에는 activeId args는 변경되지 않고 Map 컴포넌트의 상태값만 내부적으로 변경됩니다.

 

📌 useArgs 활용하기

스토리북에서 제공하는 useArgs Hook 을 사용하면 args 를 동기화할 수 있습니다.

렌더링할 컴포넌트를 감싸는 Story 컴포넌트를 생성하고 useArgs 로 arg 를 직접 변경합니다.

 

const Story = (args) => {
        const [{ activeId }, updateArgs] = useArgs()

        const handleSelect = (id) => updateArgs({ activeId: id })

        return <Map {...args} activeId={activeId} onSelect={handleSelect} />
}

const BasicStory = {
    render: Story,
    // ...
}

 

📌 적용 결과

 

 

이제 클릭 이벤트에 따라 선택된 장소의 ID 에 맞춰 activeId 도 함께 변경되는것을 확인할 수 있습니다.

 

📌 참고자료

Changing args values / state in Storybook (without useState hook)