@mycrm-ui/react-table LLM 가이드

5. 행 삭제 / 추가

이 문서는 @mycrm-ui/react-table에서 행 삭제나 신규 행 추가 기능이 필요한 코드를 생성하거나 수정해야 하는 AI 에이전트를 위한 가이드입니다.

이 파트는 사용자가 각 행을 삭제해야 하거나, 상단 버튼으로 새 행 입력을 시작해야 하거나, 체크박스 선택과 조합해서 일괄 삭제를 구현해야 할 때 사용합니다.

목적

행 삭제 / 추가 파트의 목적은 아래 관계를 정확히 맞추는 것입니다.

rowActions.deletable
rowActions.adding
컬럼별 insertable: true

LLM은 삭제 버튼만 보이게 하거나 추가 행만 띄우는 수준에서 멈추지 말고, 실제 데이터 상태 갱신과 입력 가능 컬럼 범위까지 함께 설계해야 합니다.

필수 입력

`rowActions.deletable`

각 행에 삭제 액션을 표시하려면 deletable: true를 설정합니다.

예시:

rowActions={{
  deletable: true,
  onDelete: (rowKey) => {
    setData((prev) => prev.filter((row) => String(row.id) !== rowKey));
  },
}}

deletable: true만 넣고 onDelete를 빠뜨리면 실제 삭제 동작이 완결되지 않습니다.

`rowActions.adding`

추가 입력 행을 표시할지 여부를 제어합니다.

예시:

const [isAdding, setIsAdding] = useState(false);

rowActions={{
  adding: isAdding,
  onAdd: handleAdd,
  onAddCancel: () => setIsAdding(false),
}}

컬럼의 `insertable: true`

행 추가 시 입력 필드를 렌더링할 컬럼에는 반드시 insertable: true가 필요합니다.

예시:

const columns: ColumnDef<User>[] = [
  {
    key: "name",
    label: "이름",
    insertable: true,
    render: (row) => row.name,
  },
  {
    key: "email",
    label: "이메일",
    insertable: true,
    render: (row) => row.email,
  },
];

이 속성이 없으면 adding: true를 켜도 해당 컬럼에 입력 UI가 나오지 않습니다.

`renderInsertCell`

기본 입력 UI 대신 컬럼별 커스텀 입력 UI가 필요하면 renderInsertCell을 사용합니다.

예시:

renderInsertCell: ({ value, onChange, onConfirm }) => (
  <input
    value={value}
    onChange={(e) => onChange(e.target.value)}
    onKeyDown={(e) => {
      if (e.key === "Enter") onConfirm();
    }}
  />
)

최소 동작 패턴

import { useState } from "react";
import { Table } from "@mycrm-ui/react-table";
import type { ColumnDef } from "@mycrm-ui/react-table";

interface User {
  id: number;
  name: string;
  email: string;
}

const columns: ColumnDef<User>[] = [
  {
    key: "name",
    label: "이름",
    insertable: true,
    render: (row) => row.name,
  },
  {
    key: "email",
    label: "이메일",
    insertable: true,
    render: (row) => row.email,
  },
];

export default function UserTable() {
  const [rows, setRows] = useState<User[]>([]);
  const [nextId, setNextId] = useState(1);
  const [isAdding, setIsAdding] = useState(false);

  return (
    <Table
      columns={columns}
      data={rows}
      rowKey={(row) => String(row.id)}
      rowActions={{
        deletable: true,
        onDelete: (rowKey) => {
          setRows((prev) => prev.filter((row) => String(row.id) !== rowKey));
        },
        adding: isAdding,
        onAdd: (values) => {
          setRows((prev) => [
            ...prev,
            {
              id: nextId,
              name: values.name,
              email: values.email,
            },
          ]);
          setNextId((prev) => prev + 1);
          setIsAdding(false);
        },
        onAddCancel: () => {
          setIsAdding(false);
        },
      }}
    />
  );
}

LLM 판단 규칙

사용자 요청이 아래 의미에 가깝다면 이 가이드를 사용합니다.

"행 삭제 버튼을 넣어줘"
"상단에서 새 항목을 추가할 수 있어야 해"
"입력 행을 테이블 안에서 바로 보여줘"
"선택한 행을 일괄 삭제하고 싶어"

이 경우 LLM은 아래 순서로 처리합니다.

삭제만 필요한지, 추가만 필요한지, 둘 다 필요한지 판단합니다.
삭제라면 deletable과 onDelete를 연결합니다.
추가라면 adding, onAdd, onAddCancel을 설계합니다.
입력이 필요한 컬럼에만 insertable: true를 넣습니다.
기본 입력 UI로 충분한지, renderInsertCell이 필요한지 판단합니다.
유효성 검증이 있으면 onAdd 안에서 처리합니다.

이 파트에서 추가해도 되는 것

선택 행 기반 일괄 삭제
추가 버튼과 취소 버튼
입력 유효성 검증
renderInsertCell을 통한 컬럼별 커스텀 입력 UI
addRow, addInput, addConfirmBtn, addCancelBtn 스타일 커스터마이징

이 파트에서 추가하지 말아야 하는 것

사용자가 명시적으로 요구하지 않았다면 아래 기능은 함께 넣지 않습니다.

filter
editing
loading
scroll
columnManager
expand

자주 하는 실수

실수 1. `adding: true`만 넣고 컬럼에 `insertable: true`를 안 넣음

문제점:

추가 행이 열려도 실제 입력 필드가 기대대로 나오지 않습니다.

좋은 방식:

신규 입력을 받아야 하는 컬럼마다 insertable: true를 넣습니다.

실수 2. `onAdd`에서 새 row의 고유 키를 만들지 않음

문제점:

추가된 행이 기존 데이터와 충돌하거나 렌더링 안정성이 깨질 수 있습니다.

좋은 방식:

nextId 같은 안정적인 증가값이나 실제 고유 ID를 사용합니다.

실수 3. 삭제 후 선택 상태를 정리하지 않음

문제점:

이미 지워진 rowKey가 selectedKeys에 남을 수 있습니다.

좋은 방식:

삭제 시 선택 상태도 함께 정리합니다.

실수 4. 유효성 검증이 필요한데 `onAdd`를 바로 성공 처리

문제점:

빈 값이나 잘못된 형식의 값이 그대로 추가됩니다.

좋은 방식:

onAdd 안에서 필수값, 형식, 선택값을 검증합니다.
오류가 있으면 추가를 중단하고 메시지를 표시합니다.

LLM 안전 출력 템플릿

행 삭제 / 추가 요구가 있을 때는 아래 템플릿을 우선 사용합니다.

import { useState } from "react";
import { Table } from "@mycrm-ui/react-table";
import type { ColumnDef } from "@mycrm-ui/react-table";

interface Row {
  id: number;
  name: string;
}

const columns: ColumnDef<Row>[] = [
  {
    key: "name",
    label: "이름",
    insertable: true,
    render: (row) => row.name,
  },
];

export default function ExampleTable() {
  const [rows, setRows] = useState<Row[]>([]);
  const [nextId, setNextId] = useState(1);
  const [isAdding, setIsAdding] = useState(false);

  return (
    <Table
      columns={columns}
      data={rows}
      rowKey={(row) => String(row.id)}
      rowActions={{
        deletable: true,
        onDelete: (rowKey) => {
          setRows((prev) => prev.filter((row) => String(row.id) !== rowKey));
        },
        adding: isAdding,
        onAdd: (values) => {
          setRows((prev) => [
            ...prev,
            { id: nextId, name: values.name },
          ]);
          setNextId((prev) => prev + 1);
          setIsAdding(false);
        },
        onAddCancel: () => setIsAdding(false),
      }}
    />
  );
}

다음 가이드로 넘어가야 하는 조건

아래 요구가 나오면 다음 파트로 넘어갑니다.

추가된 행을 바로 인라인 편집해야 함
삭제와 로딩/빈 상태를 함께 다뤄야 함
추가 행이 가상 스크롤이나 확장 행과 함께 동작해야 함
컬럼 관리와 함께 입력 필드 노출 조건을 제어해야 함

@mycrm-ui/react-table LLM 가이드

5. 행 삭제 / 추가

목적

필수 입력

rowActions.deletable

rowActions.adding

컬럼의 insertable: true

renderInsertCell

최소 동작 패턴

LLM 판단 규칙

이 파트에서 추가해도 되는 것

이 파트에서 추가하지 말아야 하는 것

자주 하는 실수

실수 1. adding: true만 넣고 컬럼에 insertable: true를 안 넣음

실수 2. onAdd에서 새 row의 고유 키를 만들지 않음

실수 3. 삭제 후 선택 상태를 정리하지 않음

실수 4. 유효성 검증이 필요한데 onAdd를 바로 성공 처리

LLM 안전 출력 템플릿

다음 가이드로 넘어가야 하는 조건

`rowActions.deletable`

`rowActions.adding`

컬럼의 `insertable: true`

`renderInsertCell`

실수 1. `adding: true`만 넣고 컬럼에 `insertable: true`를 안 넣음

실수 2. `onAdd`에서 새 row의 고유 키를 만들지 않음

실수 4. 유효성 검증이 필요한데 `onAdd`를 바로 성공 처리