VAC Debugger - 배열 처리

Park U-yeong·2022년 11월 30일

React debugging pattern vac view asset component 디버거

VAC Debugger

목록 보기

3/7

목록 테스트

배열 데이터를 이용하면 VAC Debugger(이하 <VAC>)에서 반복 처리되는 컴포넌트에 대해서 테스트를 할 수 있습니다.

관련 속성: useList, useEach

관련 프리셋: <VACList>

기본 설정

Props Object에 list 속성을 추가하여 목록으로 출력할 배열을 참조합니다.

import { VAC } from 'react-vac';

const model = [
  { idx: 1, title: "제목1", views: 4 },
  { idx: 2, title: "제목2", views: 2 },
  { idx: 3, title: "제목3", views: 8 },
];

function Article() {
  // Props Object에 배열 전달
  const vArticleProps = {
    articleList: model
  };

  // VAC Debugger를 이용해 View 로직 테스트
  return <VAC name="Article 테스트" data={vArticleProps} />;
  
  // JSX를 관리하는 VAC는 별도로 개발
  // return <VAtricle {...vArticleProps} />;
}

예제보기

useList

기본 형태로 사용할 경우 출력되는 내용을 보기가 쉽지 않습니다.
따라서 useList 속성을 이용해 배열을 목록 형태로 출력하도록 합니다.
useList에는 목록으로 지정할 배열의 속성명을 문자열로 전달합니다.

const vArticleProps = {
  articleList: model
};

// useList 속성에는 리스트로 노출할 props 이름을 전달
return (
  <VAC
    name="SpinBox 테스트"
    data={vArticleProps}
    useList="articleList"
  />
);

useEach

원본 배열을 다른 형태로 가공하는 경우는 useEach 속성을 이용해 배열을 가공하는 함수의 속성명을 문자열로 전달합니다.

const vArticleProps = {
  articleList: model,

  // 배열 인자를 가공해서 반환하는 함수
  getItemData: (data, index) => ({
    // 기존 데이터
    ...data,

    // 추가 속성
    onClick: (e) => console.log(data.title)
  })
};

// useEach 속성에 함수로 사용할 props 이름을 전달
return (
  <VAC
    name="Article 테스트"
    data={vArticleProps}
    useList="articleList"
    useEach="getItemData"
  />
);

useEach에 지정하는 함수는 VAC 내부에서 원본 배열을 가공하는데 사용합니다.

VACList

<VACList>는 useList="list"와 useEach="each" 속성이 미리 설정된 프리셋 <VAC>입니다.
따라서 Props Object의 속성명이 list, each인 경우는 <VACList>를 사용하면 별도로 설정을 할 필요가 없습니다.

import {VAC, VACList} from 'react-vac';

// Props Object 속성명을 list와 each로 설정
const vArticleProps = {
  list: model,
  each: (data, index) => ({
    ...data,
    onClick: (e) => console.log(data.title)
  })
};

// 프리셋
<VACList name="Article 테스트" data={vArticleProps} />

// 위와 동일한 설정
<VAC
  name="Article 테스트"
  data={vArticleProps}
  useList="list"
  useEach="each"
/>

주의할 점

uesEach 속성을 사용한 경우에는 실제 VAC 내에서 지정된 함수를 이용하여 데이터를 가공해서 사용해야 합니다.

// VAC
function VArticle({list, each}) {
  return (
    <ul>
      {list.map((data, index) => {
        
        // each 함수로 배열 데이터 가공
        const {idx, title, views, onClick} = each(data);
        
        return (
          <li key={idx}>
            <a href="#" onClick={onClick}>{title}</a>
          </li>
        );
        
      })}
    </ul>
  );
}

예제보기

VAC 패턴에서 배열을 가공하는 함수를 View에서 생성해서 전달하는 이유는 목록의 View 로직을 VAC에서 관리하지 않고 View에서 관리하기 위함입니다.

만약 외부에서 전달하는 each 함수를 사용하지 않는 경우는 동일한 기능을 구현하기 위해서 VAC 내부에서 onClick 함수를 직접 관리해야 됩니다.
이렇게 VAC가 callback 함수를 생성해서 관리하게 되면 View 로직이 변경될 경우 VAC에서도 수정이 필요하게 됩니다.

// VAC에 each 대신 handleClick 함수를 전달하는 경우
function VArticle({list, handleClick}) {
  return (
    <ul>
      {list.map((data, index) => {
        
        // each 함수로 배열 데이터 가공할 경우
        // View 로직을 처리하는 onClick 함수가 외부에서 전달됨
        // const {idx, title, views, onClick} = each(data);
        
        // each 함수를 사용하지 않는 경우
        // VAC 내부에서 onClick 함수를 직접 관리함
        const {idx, title, views} = data;
        const onClick = (e) => {
          // 클릭한 목록의 title이 아니라 idx가 필요하면
          // VAC에서 수정해야 함
          handleClick(title);
        };
        
        return (
          <li key={idx}>
            <a href="#" onClick={onClick}>{title}</a>
          </li>
        );
        
      })}
    </ul>
  );
}