리액트에서 귀찮았던 모달을 간편하게 만들어보자

React로 개발하다보면, DropDown 이나 Modal같은 것들을 굉장히 자주 만들게 됩니다. 근데 항상 매번 비슷한 코드를 반복하다 보면 귀찮고 지겹고 좀 더 깔끔하게 만드는법이 없을까 생각이 들죠

오늘은 제가 자주 사용하는 방법들을 소개할려고 합니다.

---

상태관리 최소화 하는 훅 만들기

const useToggle = () => {
  const [open, setOpen] = useState(false);

  const toggleHandler = useCallback(() => setOpen((prev) => !prev), []);
  const openHandler = useCallback(() => setOpen(true), []);
  const closeHandler = useCallback(() => setOpen(false), []);

  return { open, toggleHandler, openHandler, closeHandler };
};

const Modal = () => {
  const { openHandler } = useToggle();
  return (
    <button type="button" onClick={openHandler}>
      열기
    </button>
  );
};

이렇게 하면 똑같은 코드를 자주 짤 필요없이 필요할때만 useToggle()을 불러오면 되겠죠

---

외부 클릭 close

const useOutside = (fn) => {
  const ref = useRef();

  useEffect(() => {
    const handleClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        fn();
      }

      document.addEventListener("mousedown", handleClick);
      return () => document.removeEventListener("mousedown", handleClick);
    };
  }, [fn]);
};

const Main = () => {
  const { openHandler, closeHandler } = useToggle();

  return <Modal closeHandler={closeHandler} />;
};

const Modal = ({ closeHandler }) => {
  const modalRef = useOutside(closeHandler);

  return (
    <div className="modal">
      <div ref={modalRef} className="modal-content">
        모달
      </div>
    </div>
  );
};

이런식으로 사용해서 외부 클릭으로도 닫히게 할수있죠 나머지는 confirm을 만들던지 등 여러가지 활용을 할 수 있겠죠

---

또한 직접 만들면 커스텀은 좋지만 검증된 라이브러리를 사용하는방법도 있습니다

react-modal

import Modal from "react-modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={() => setIsOpen(false)}
      contentLabel="Example Modal"
    >
      <h2>모달 제목</h2>
      <button onClick={() => setIsOpen(false)}>닫기</button>
    </Modal>
  );
}

---

@radix-ui/react-dialog
shadcn

이런 컴포넌트 라이브러리를 사용해도 좋은 방법입니다.

요약

방법	장점
useToggle	상태 관리 간소화
useOutsideClick	외부 클릭 처리 자동화
useModal	Promise 기반 간편 사용
라이브러리	검증된 기능, 접근성

방법은 여러가지가 있고 결국 본인이 제일 편한 방법을 사용하는것이 제일 좋을것입니다. 여러가지 사용해보고, 결정하는것도 좋은 방법이죠

저는 커스텀이 간편한 직접 구현하는 방식을 많이 사용합니다.