네이티브 dialog element는 어떻게 동작하나요?

Question

Accepted Answer

`<dialog>`는 **모달과 대화 상자**를 위한 네이티브 element입니다. 포커스 트래핑, 백드롭, 최상위 레이어(top layer), Escape로 닫기를 처리합니다. 그렇지 않으면 많은 JavaScript와 ARIA로 직접 만들어야 하는 기능들입니다.

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## JS에서 열고 닫기

```js
const modal = document.getElementById("myModal");

modal.showModal(); // 모달로 연다: 백드롭 + 포커스 트랩 + Esc로 닫힘
modal.show();      // 비모달로 연다 (백드롭 없음, 페이지는 상호작용 가능 유지)
modal.close("ok"); // 닫고, returnValue를 설정한다

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" 또는 "cancel" — 버튼의 value로부터
});
```

## showModal()로 무료로 얻는 것

- **포커스 트래핑** — 열려 있는 동안 Tab이 dialog 안에 머뭅니다.
- **백드롭** — `::backdrop`으로 스타일링 가능하고, 바깥쪽 클릭을 감지할 수 있습니다.
- **최상위 레이어** — `z-index`와 관계없이 모든 것 위에 렌더링됩니다.
- **Escape 키**로 닫힙니다.
- **form의 `method="dialog"`** — dialog를 닫고 어느 버튼이 제출했는지 기록합니다.

## 백드롭 스타일링

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## 왜 중요한가

`<dialog>` 이전에는 접근성 있는 모달이 수동 포커스 관리, ARIA role, 스크롤 잠금, Escape 처리를 요구했으며, 이는 악명 높은 버그의 원천이었습니다.

네이티브 element는 이 모든 것을 올바르게 기본 제공합니다.

진짜 모달에는 `showModal()`을 사용하십시오. 이것이 대화 상자를 위한 현대적이고 접근성 있는 기본값입니다.