Zustand 소프트 삭제 — enumerable:false로 컴포넌트 크래시 없이 처리하기

const obj = Object.defineProperties({}, {
  'task-1': {
    value: { id: 'task-1', title: 'Task 1' },
    enumerable: true
  },
  'task-2': {
    value: { id: 'task-2', title: 'Task 2' },
    enumerable: false  // 삭제된 항목
  },
});
 
Object.keys(obj);    // ['task-1'] — task-2는 안 보임
Object.values(obj);  // [{ id: 'task-1', title: 'Task 1' }]
obj['task-2'];       // { id: 'task-2', title: 'Task 2' } — 직접 접근은 됨

{
  "id": "task-1",
  "entityType": "task",
  "__isDeleted": true
}

import { create } from 'zustand';
 
type Entity = { id: string; [key: string]: unknown };
type Registry<T extends Entity> = Record<string, T>;
 
function defineEntity<T extends Entity>(
  registry: Registry<T>,
  entity: T & { __isDeleted?: boolean }
): Registry<T> {
  const isDeleted = '__isDeleted' in entity;
  const nextRegistry = { ...registry };
 
  Object.defineProperty(nextRegistry, entity.id, {
    value: entity,
    enumerable: !isDeleted,   // 삭제되면 숨김
    writable: true,
    configurable: true,
  });
 
  return nextRegistry;
}
 
interface TaskStore {
  tasks: Registry<Task>;
  upsertTask: (task: Task & { __isDeleted?: boolean }) => void;
}
 
export const useTaskStore = create<TaskStore>((set) => ({
  tasks: {},
  upsertTask: (task) =>
    set((state) => ({
      tasks: defineEntity(state.tasks, task),
    })),
}));

function TaskList() {
  const tasks = useTaskStore((state) => Object.values(state.tasks));
  // Object.values는 enumerable:false 항목을 자동으로 제외
 
  return (
    <ul>
      {tasks.map((task) => (
        <TaskItem key={task.id} taskId={task.id} />
      ))}
    </ul>
  );
}

function TaskItem({ taskId }: { taskId: string }) {
  const task = useTaskStore((state) => state.tasks[taskId]);
  // 삭제된 항목이어도 undefined가 아닌 실제 값을 반환
 
  if (!task) return null;
 
  return <div>{task.title}</div>;
}