매력적인 모달 만들기 - 트러블 슈팅

트러블 슈팅

최근에 내가 유지보수하고 있는 every gsm이라는 프로젝트에서 다음과 같은 에러가 나타났다

 

무슨 문제였었냐면 position:fixed 속성이 제대로 작동하지 않는 문제였다
원래는 2번째 사진처럼 보여야 한다 딱히 코드를 수정한것도 없었기에 더욱 당황스러웠다

문제를 찾아보니 이유는 position:fixed 속성은 조상 tag 속성중에 transform, perspective, filter 속성이 하나라도 있다면 그 조상 tag를 기준으로 modal이 위치를 정하게 되는 특징 때문이었는데 나는 조상 요소에 transform 속성이 있어서 문제였던 것이다!

그래서 내가 생각해낸 방법은 2가지가 있었다

• 조상 요소에 transform 속성을 제거한다
• 조상 요소 밖으로 모달을 이동 시킨다

하지만 둘다 애매한 해결 방법이었다
왜냐하면 첫번째 방법은 슬라이드 카드 위치 변경하는것을 reflow를 발생 시키지 않도록 tranform을 사용했기 때문에 애매하다고 생각했고
두번째 방법으로 해결하려면 전역 상태를 활용해서 해결해야 하기 때문에 이 방법도 애매하다고 생각했다

더 좋은 방법을 생각하던 중 프로젝트를 같이 하고 계시는 선배님께서 dialog tag를 사용해서 문제를 해결하고 hotfix pr을 올리셨다

내가 생각하지 못했던 방법이여서 신기했었다ㅎ

그래서 알아봤는데 dialog tag를 사용한다면 매력적인 modal을 만들수 있다고 생각했다

dialog

dialog tag는 modal을 만들때 많이 사용하는 태그로 기능을 하나씩 알아가보자!

일단 내가 dialog tag를 알기전까지는 아래와 같이 modal을 만들고 사용했었다

import { useState } from "react";

export default function Home() {
  const [isModal, setIsModal] = useState(false);

  return (
    <div>
      <button
        onClick={() => {
          setIsModal(true);
        }}
      >
        show
      </button>

      {isModal && <Modal />}
    </div>
  );
}

리액트의 state를 활용하여 만들었다
하지만 이렇게 하면 몇가지 단점이 존재한다

단점

• state를 사용하기 때문에 modal을 띄우거나 내릴때 마다 리렌더링이 발생한다
• 코드를 더 추가하여 modal 외 다른부분 클릭을 못하게 막고 또 modal이 중앙에 오게 만들어야 한다

 

위의 단점을 dialog tag를 활용한다면 해결할 수 있다
react에서 dialog tag를 사용하여 아래와 같이 코드를 작성 한다면 아래 영상에 보이는 것처럼 작동이 된다

import { useRef } from "react";

export default function Home() {
  const ref = useRef<HTMLDialogElement>(null);

  return (
    <div>
      <button
        onClick={() => {
          ref.current?.showModal();
        }}
      >
        show
      </button>

      <dialog ref={ref}>
        <form method="dialog">
          <button>close</button>
        </form>
      </dialog>
    </div>
  );
}

 

 

 

• showModal 메서드는 모달을 띄우게 하는 메서드이다
• dialog tag 안에서 form을 제출하면 dialog tag가 닫힌다
• form울 제출하기 싫다면 close 메서드를 사용해도 된다
• ::backdrop으로 뒷 배경 색을 변경하거나 꾸밀 수 있다

장점

• dialog tag는 기본적으로 modal 부분 이외의 영역은 클릭을 막는다
• 중앙으로 정렬되어 있어 css 코드를 줄일수 있다

 

마무리

이렇게 오늘은 트러블슈팅과 트러블슈팅을 하면서 알게된 dialog tag에 대해 알아보았다
이번에 dialog tag를 알게 되면서 이제부터는 html tag도 여러가지 많이 알아놓으면 나중에 꼭 도움이 될거라는 생각이 든다