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

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

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

---

1. 상태관리 최소화 하는 훅 만들기 ```jsx 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()을 불러오면 되겠죠

---
2. 외부 클릭 close
```jsx
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 기반 간편 사용 |라이브러리| 검증된 기능, 접근성

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

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