시맨틱하게 다이얼로그 만들기

웹에서 양식을 제출하기 위한 다이얼로그를 작성할 때 시맨틱 태그를 무시하고 div 태그를 활용해 css로 스타일링을 하는 경우가 많다.

이렇게 작성할 경우, 동작에는 전혀 무리가 없지만 하지 않아도 될 스타일링 작업을 하는 데 시간을 쏟을 수 있고 웹접근성 측면에도 좋지 않다.

웹에서 다이얼로그는 모달, 대화상자, 알림창, 검사기와 같은 상호작용 가능한 컴포넌트를 말한다.

HTML에서는 dialog 라는 태그를 사용하면 핵심적인 다이얼로그의 기능을 사용할 수 있다.

아래 코드는 가장 좋아하는 동물을 선택한 후 제출하는 양식의 다이얼로그를 나타낸다.

<dialog id="favDialog">
  <form>
    <p>
      <label>
        가장 좋아하는 동물:
        <select>
          <option value="default">선택</option>
          <option>토끼</option>
          <option>고양이</option>
          <option>강아지</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">취소</button>
      <button id="confirmBtn" value="default">저장</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">다이얼로그 열기</button>
</p>
<output></output>

dialog 태그를 통해 다이얼로그 영역을 만들어 주고, form 태그를 자식에 넣어 폼 역할을 나타낸다.

다이얼로그는 보통 싱글버튼 또는 더블버튼으로 이루어진다.

다이얼로그만 닫고 아무런 이벤트를 발생하지 않는 버튼에는 formmethod="dialog” 속성을 부여한다.

다이얼로그가 닫힐 때 이벤트도 함께 발생하는 버튼은 자바스크립트로 기능을 수행하도록 한다.

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// 버튼 클릭 시 다이얼로그 열림
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// 선택하지 않고 저장 클릭 시 '선택하지 않음' 반환
// 선택한 후 저장 클릭 시 선택한 동물 반환
// 선택하지 않고 저장 클릭 시 'cancel' 반환
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "선택하지 않음"
      : `ReturnValue: ${favDialog.returnValue}.`;
});

// 저장 클릭 시 다이얼로그 닫힘 호출
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault();
  favDialog.close(selectEl.value);
});

다이얼로그가 열리는 이벤트나 다이얼로그가 닫힌 이후에 발생하는 이벤트는 자바스크립트로 작성한다.

showModal() 함수를 통해 다이얼로그를 열고 close() 함수를 통해 다이얼로그를 닫을 수 있다.

close() 안에는 특정 값을 넣어서 닫힌 이후 발생하는 이벤트에서 활용할 수 있다.