WeakMap 기반 컴포넌트 상태 관리

const stateStore = new Map();

function render(component) {
  if (!stateStore.has(component)) {
    stateStore.set(component, { count: 0 });
  }
  const state = stateStore.get(component);
  // ... 렌더링 로직
}

const weakMap = new WeakMap();

let obj = { name: "hello" };
weakMap.set(obj, "some data");

obj = null; // 외부 참조 제거
// → WeakMap 내부의 { name: "hello" } → "some data" 엔트리도
//   가비지 컬렉터에 의해 자동 수거됨

const stateStore = new WeakMap();

function mountComponent(component) {
  stateStore.set(component, { count: 0, text: "" });
  // 컴포넌트가 DOM에 마운트됨
}

function unmountComponent(component) {
  // component에 대한 외부 참조가 사라지면
  // stateStore 내부의 상태도 자동으로 GC 대상이 됨
  // 별도의 cleanup 코드가 필요 없음
}

const stateStore = new WeakMap();

function createComponentInstance(renderFn) {
  const instance = { render: renderFn, hooks: [] };
  stateStore.set(instance, []);
  return instance;
}

function getState(instance) {
  return stateStore.get(instance);
}

const stateStore = new WeakMap();

function useState(initialValue) {
  const contextKey = {};

  if (!stateStore.has(contextKey)) {
    stateStore.set(contextKey, []);
  }

  const states = stateStore.get(contextKey);
  const index = states.length;

  if (index >= states.length) {
    states.push(initialValue);
  }

  const setState = (newValue) => {
    states[index] = newValue;
  };

  return [states[index], setState];
}

const stateStore = new WeakMap();
let currentComponent = null;
let hookIndex = 0;

function renderComponent(instance) {
  // 현재 렌더링 중인 컴포넌트를 전역에 등록
  currentComponent = instance;
  hookIndex = 0;

  // 이 컴포넌트의 상태 배열이 없으면 생성
  if (!stateStore.has(instance)) {
    stateStore.set(instance, []);
  }

  // 컴포넌트의 render 함수 실행
  // → 내부에서 useState가 호출되면 currentComponent를 키로 사용
  const vdom = instance.render();

  currentComponent = null;
  return vdom;
}

function useState(initialValue) {
  const component = currentComponent;
  const states = stateStore.get(component);
  const idx = hookIndex++;

  // 최초 렌더링: 초기값 저장
  if (idx >= states.length) {
    states.push(initialValue);
  }

  const setState = (newValue) => {
    states[idx] = newValue;
    // 상태 변경 후 리렌더링 트리거
    scheduleRerender(component);
  };

  return [states[idx], setState];
}

function Counter() {
  const [count, setCount] = useState(0);      // states[0]
  const [name, setName] = useState("hello");   // states[1]
  const [active, setActive] = useState(false); // states[2]
  // ...
}

// ❌ 잘못된 사용
function Component() {
  const [count, setCount] = useState(0);   // 항상 states[0]

  if (count > 0) {
    const [name, setName] = useState("");  // 조건부 → 인덱스 불안정
  }

  const [active, setActive] = useState(true);
  // count === 0일 때: states[2]
  // count > 0일 때: states[2]이지만, name이 states[1]을 차지하면서 밀림
}

const store = new Map();
store.set("counter-1", { count: 0 });
store.set("counter-2", { count: 5 });

function createCounter(initial) {
  let count = initial;
  return {
    getCount: () => count,
    increment: () => { count++; }
  };
}

const store = new WeakMap();
store.set(instance, [0, "", false]);

const store = new WeakMap();
store.set(comp1, [1, 2]);
store.set(comp2, [3, 4]);

// ❌ 불가능
// for (const [key, value] of store) { ... }
// store.forEach(...)
// JSON.stringify(store)

const store = new WeakMap();
store.set("component-1", data); // ❌ TypeError: Invalid value used as weak map key
store.set(42, data);            // ❌ TypeError
store.set(Symbol(), data);      // ❌ TypeError (WeakMap은 심볼도 불가)

let obj = { data: "heavy" };
store.set(obj, largeState);
obj = null;
// 이 시점에서 store의 엔트리가 즉시 사라지는 게 아님
// GC가 실행될 때까지 메모리에 남아있을 수 있음

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`${heldValue} 인스턴스가 GC되었음`);
  // 추가 정리 작업 수행
});

function mountComponent(instance, name) {
  stateStore.set(instance, []);
  registry.register(instance, name);
  // instance가 GC되면 콜백이 호출됨
}