#3. 모달창 구현( feat. 영역 밖 클릭 시 닫기)

#3-0 들어가는 말

 Header 영역을 작업하던 중 모달창 닫기 부분에서 잠시 막혔었다. 모달창 닫기 버튼이 따로 없고, 모달창 영역 밖을 클릭했을 시 모달창이 닫히는 구조였기 때문이다. 구현하기 쉬운 기능이라고 생각했는데 생각보다 조금 시간이 걸렸다. 그래도 해내었다는 것에 기쁨을 느꼈다. 

 

---

#3-1 useRef  이용하기

특정한 Element를 선택하고 싶을 때 자바스크립트로 getElementById나 querySelector 등을 사용하듯이, 리액트에선 어떻게 사용할 수 있을까? 정답은 useRef Hook 함수 사용하기! 

 

모달창 영역 밖에 해당하는 부분을 useRef를 통해 선택한 후, 해당 Element가 클릭 되었을 때만 모달창이 닫히도록 이벤트를 주면 된다. 

 

*예시 코드 

import React, { useState, useRef } from 'react';

function Header(){
  const [menuBtnClick, setMenuBtnClick] = useState(false);
  const outSection = useRef();

  return (
    <>
    <header>
     ...
     <button type="button" onClick={()=>{setMenuBtnClick(true)}}>
  	 메뉴버튼
     </button>
     ...
     {
     	menuBtnClick === true
        ? (<div class="modal-outside" ref={outSection} onClick={(e)=>{
          if(outSection.current === e.target) {
              setMenuBtnClick(false)
          }
       }}>
         <div class="modal-content"> 모달창 내용</div>
       <div>)
       : null
     }
    </header>
    </>
    )
}