컴포넌트 스토리 작성
CSF3 형식, 기본 내보내기(title, component), 스토리로 사용하는 이름 있는 내보내기와 args를 다룹니다.
컴포넌트 스토리 작성은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
스토리는 컴포넌트 상태를 설명합니다
스토리는 컴포넌트의 한 가지 상태, 즉 특정한 속성과 콘텐츠의 조합을 담습니다. 버튼에는 Primary, Secondary, Disabled 스토리가 있을 수 있습니다. Storybook은 각각을 별도로 탐색할 수 있는 예제로 렌더링합니다.
CSF3: 현대적인 형식
Storybook은 컴포넌트 스토리 형식 3(CSF3)을 사용합니다. 하나의 파일에는 컴포넌트를 설명하는 기본 내보내기 하나와 각 스토리를 위한 이름 있는 내보내기가 들어갑니다. 일반 JavaScript/TypeScript 객체를 사용하므로 상용구 코드가 최소화됩니다.
기본 내보내기(메타)
기본 내보내기는 메타 객체입니다. 최소한 title(사이드바 경로)과 문서화할 component가 포함됩니다.
import Button from "./Button.vue"
export default {
title: "Components/Button",
component: Button,
}title이 사이드바를 구성합니다
title은 슬래시를 사용하여 Storybook 사이드바에 폴더 계층 구조를 만듭니다. "Forms/Inputs/TextField"는 세 단계 깊이로 중첩됩니다.
export default {
title: "Forms/Inputs/TextField",
component: TextField,
}이름 있는 내보내기는 스토리입니다
각 이름 있는 내보내기는 스토리 변형입니다. 내보내기 이름이 사이드바에서 스토리 레이블이 됩니다.
export const Primary = {}
export const Secondary = {}
export const Disabled = {}args 객체
스토리의 args 객체는 속성 값을 제공합니다. Storybook은 이를 컴포넌트에 전달하고, Controls 패널에서는 값을 실시간으로 조정할 수 있습니다.
export const Primary = {
args: {
label: "Click me",
variant: "primary",
},
}args로 여러 변형 만들기
args만 변경하여 여러 스토리에서 같은 컴포넌트를 재사용합니다. 각 내보내기는 서로 다른 속성으로 컴포넌트를 렌더링합니다.
export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }메타에 기본 args 지정하기
공유하는 args는 메타 객체에 넣고, 개별 스토리에서는 다른 값만 재정의합니다. 이렇게 하면 스토리가 DRY하게 유지됩니다.
export default {
component: Button,
args: { label: "Button" }, // default for all stories
}
export const Disabled = { args: { disabled: true } }render로 슬롯이 있는 스토리 만들기
슬롯 콘텐츠를 사용하려면 컴포넌트를 사용하는 템플릿을 반환하는 render 함수를 제공하세요. 이렇게 하면 args만으로 표현할 수 없는 경우도 처리할 수 있습니다.
export const WithIcon = {
render: (args) => ({
components: { Button },
setup() { return { args } },
template: '<Button v-bind="args">⭐ Star</Button>',
}),
}tags로 문서 자동 생성하기
메타에 tags: ["autodocs"]를 추가하면 Storybook이 컴포넌트의 속성과 스토리에서 문서 페이지를 자동으로 생성합니다.
export default {
title: "Components/Button",
component: Button,
tags: ["autodocs"],
}autodocs가 만드는 것
autodocs 페이지에는 컴포넌트의 속성(이름, 형식, 기본값)이 나열되고, 각 스토리가 실시간 예제로 표시되며, 설명 주석도 렌더링됩니다. 추가 파일 없이 항상 최신 상태를 유지하는 명세입니다.
빠른 확인
스토리 작성에 대한 이해도를 확인해 보세요.
복습
컴포넌트 스토리를 작성하는 방법을 배웠습니다.
- 스토리는 컴포넌트의 한 가지 상태를 담으며, CSF3은 객체 내보내기를 사용합니다.
- 기본 내보내기는
title(사이드바 경로)과component를 포함하는 메타입니다. - 각 이름 있는 내보내기는 스토리 변형이며,
args가 속성 값을 제공합니다. - 공유하는 args는 메타에 지정하고 나머지는 스토리에서 재정의합니다. 슬롯에는
render를 사용합니다. tags: ["autodocs"]는 문서 페이지를 자동으로 생성합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“컴포넌트 스토리 작성” 강의는 무료인가요?
네 — “컴포넌트 스토리 작성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“컴포넌트 스토리 작성”에서 뭘 배우나요?
CSF3 형식, 기본 내보내기(title, component), 스토리로 사용하는 이름 있는 내보내기와 args를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“컴포넌트 스토리 작성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.