VAC Debugger - 시작하기

시작하며

이번 시리즈를 통해 VAC 패턴을 적용하는데 도움을 주는 VAC Debugger에 대한 사용법을 설명합니다.
VAC Debugger에 대한 상세한 사용법은 VAC Debugger Usage 내용을 참고할 수 있습니다.

본 글에서 VAC는 View Asset Component를 의미하며 <VAC>(VAC Debugger)와 구분히야 합니다.

VAC 패턴은 React 환경에서 JSX 영역과 로직을 분리하기 위한 설계패턴입니다.
React VAC Pattern - View 로직과 JSX의 의존성을 최소화 하자! 내용 참고

장점

• VAC Debugger로 개발하면 자연스럽게 VAC 패턴으로 설계가 됩니다.
• JSX가 없어도 빠르게 로직을 테스트를 할 수 있는 UI가 자동으로 구성됩니다.
• 렌더링에 필요한 데이터의 변화를 시각적으로 확인할 수 있습니다.

설치

VAC Debugger는 React 환경에서 별다른 설정 없이 사용할 수 있는 컴포넌트로 다음과 같이 설치해서 사용할 수 있습니다.

// npm
npm i react-vac -D

// yarn
yarn add react-vac -D

기본 사용법

개발중인 React 환경에서 VAC Debugger를 설치했다면 아래와 같이 적용할 수 있습니다.

import { VAC } from 'react-vac';

function Example() {
  return (
    <VAC name="디버거 이름" data={'출력할 내용'} />
  );
}

name 속성은 여러 <VAC>를 구분하기 위한 이름이며 생략할 수 있습니다.
data 속성은 <VAC>가 출력할 내용입니다. 이 속성은 주로 Props Object를 전달합니다.

동작 화면에서 <VAC>의 값이 표시되는 영역을 클릭하면 브라우저 개발자 도구의 Console에 data 속성에 전달한 내용이 출력됩니다.

Props Object는 VAC 패턴에서 JSX 영역을 추상화한 객체로, 여기에 정의한 속성을 분석하여 테스트 할 수 있는 UI를 구성합니다.

import { VAC } from 'react-vac';

function Example() {
  // JSX 영역을 추상화 한 Props Object
  const exampleProps = {
    value: '예제 속성',
    onClick: (e) => console.log('클릭')
  };
  
  // Props Object 테스트
  return (
    <VAC name="Props Object 테스트" data={exampleProps} />
  );
}

예제 보기

마치며

다음편은 VAC Debugger를 활용해서 VAC 패턴을 설계하는 방법에 대해서 설명합니다.