Vue Academy · 강의

Controls, Actions와 Args

컨트롤 UI를 위한 argTypes, 이벤트 로깅을 위한 Actions 애드온과 상호작용 테스트를 위한 play()를 익힙니다.

Controls, Actions와 Args은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

상호작용형 컨트롤

Storybook의 Controls 패널은 스토리의 args를 실시간 양식 필드로 변환합니다. 속성을 변경하면 코드를 수정하지 않아도 컴포넌트가 즉시 다시 렌더링됩니다. 이러한 필드는 argTypes로 구성합니다.

argTypes 정의하기

argTypes는 각 속성의 컨트롤 형식, 옵션, 문서를 설명합니다. 메타 객체에서 args와 나란히 지정합니다.

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

텍스트 및 불리언 컨트롤

컨트롤 형식이 위젯을 선택합니다. text는 입력 상자를 제공하고, boolean은 토글 스위치를 제공합니다.

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

options를 사용하는 선택 컨트롤

고정된 값 집합에는 options 배열과 함께 select 컨트롤을 사용합니다. 패널에 드롭다운이 표시됩니다.

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

색상 및 숫자 컨트롤

유용한 다른 컨트롤로는 색상 선택기를 여는 color와 숫자 입력을 제공하는 number(또는 range)가 있습니다.

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

Actions 애드온

Actions 애드온은 패널에 이벤트를 기록하므로 컴포넌트가 이벤트를 올바르게 내보내는지 확인할 수 있습니다. fn()을 사용하여 arg를 기록 함수에 연결합니다.

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

fn()의 작동 방식

fn()은 Actions 패널에 호출을 기록하는 스파이를 만듭니다. 컴포넌트가 처리기를 호출하면(예: 내보낸 click을 onClick에 매핑한 경우) 호출과 인수를 확인할 수 있습니다.

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

이벤트를 처리기에 매핑하기

Vue는 이벤트를 내보내고, Storybook은 on<Event> arg를 해당 이벤트에 매핑합니다. 내보낸 update 이벤트는 onUpdate 액션 arg를 통해 표시됩니다.

argTypes: {
  onUpdate: { action: "update" },
}

play 함수

스토리에는 렌더링 후 실행되어 사용자 상호작용(클릭, 입력)을 시뮬레이션하고 결과를 검증하는 play 함수가 포함될 수 있습니다. 이를 통해 스토리가 상호작용 테스트가 됩니다.

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

play에서 검증하기

play 내부에서는 expect로 검증하고 액션이 호출되었는지 확인할 수 있으므로, 상호작용 테스트를 Storybook에서 바로 확인할 수 있습니다.

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

Controls + Actions + play가 중요한 이유

이 기능들을 함께 사용하면 스토리가 강력해집니다. Controls로 속성을 탐색하고, Actions로 이벤트 발생을 확인하며, play로 상호작용과 검증을 자동화할 수 있어 문서와 테스트를 한곳에서 관리할 수 있습니다.

빠른 확인

컨트롤과 액션에 대한 이해도를 확인해 보세요.

복습

컨트롤, 액션, args를 배웠습니다.

argTypes는 Controls 패널의 구성을 결정합니다. text, boolean, select(options 포함), color, number/range를 사용할 수 있습니다.
Actions 애드온은 이벤트를 기록합니다. fn()으로 처리기를 연결하거나 action으로 이벤트를 매핑합니다.
play 함수는 렌더링 후 실행되어 userEvent로 상호작용을 시뮬레이션하고 expect로 검증합니다.
이 기능들을 함께 사용하면 스토리를 탐색 가능하고 검증 가능하며 자체적으로 문서화된 형태로 만들 수 있습니다.

자주 묻는 질문

“Controls, Actions와 Args” 강의는 무료인가요?

네 — “Controls, Actions와 Args” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Controls, Actions와 Args”에서 뭘 배우나요?

컨트롤 UI를 위한 argTypes, 이벤트 로깅을 위한 Actions 애드온과 상호작용 테스트를 위한 play()를 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Controls, Actions와 Args” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기