[SidePJ] React 모달 영역 밖 클릭시 닫기

 

 

 

📌 전체 구조

PayModalWrapper 가 RoomPayModal을 감싸고 있는 상태

동작 : 숙소를 누르면 모달창이 뜨고 모달창 외의 영역 클릭 시 모달창이 닫힌다. 

 

 

📌 코드 

handlePayModalOff  함수로  모달 외 영역 클릭 시 닫히는 클릭이벤트를 제어할 예정 

 

return 부분

  return (
    <ReservationMainDiv>
      <AvailableRoom
        setIsPayModalClicked={setIsPayModalClicked}
        roomData={roomData}
      />
      <RoomMap roomData={roomData} />
      {isPayModalClicked && (
        <PayModalWrapper
          className="paymodalWrapper"
          onClick={(e) => handlePayModalOff(e)}
        >
          <RoomPayModal />
        </PayModalWrapper>
      )}
    </ReservationMainDiv>
  );

 

handlePayModalOff 

const ReservationMain = () => {

  const [isPayModalClicked, setIsPayModalClicked] = useState(false);

  const handlePayModalOff = (e) => {

    const clicked = e.target.closest('.paymodal');

    if (clicked) return;
    
    else {
      setIsPayModalClicked(false);
    }
  };

❖ isPayModalClikced , setIsPayModalClicked   : useState로 모달 click 여부 boolean 관리

❖ cliked : 'paymodal'이라는 class이름을 가진 요소를 선택 

⚠️ 여기서 closest는 자신부터 부모 요소 단위로 출발해 , 각 요소가 지정한 선택자에 만족할 때까지 탐색한다 (Jenny 출처

 

따로 이벤트 캡쳐링 버블링 지정을 안해줬음으로 버블링으로 진행이 되고 ( 클릭한 요소 -> 상위로)

모달을 클릭했을 시 : cliked에 <RoomPayModal> className= 'paymodal'이 들어감  ( 자신부터 부모로 탐색하니) 

모달 외 영역 클릭 시 : cliked에 <payModalWrapper>가 들어감 

-> cliked가 존재하면  : return 모달 그대로

-> cliked null이면  : false  모달 close

 

함수와 상태관리를 통해 모달영역의 닫힘을 제어할 수 있었다. 

 

RoomMapPayModal 

const RoomMapPayModal = () => {

  return (
    <RoomMapPayModalDiv className="paymodal">

참고로 className은 RoomMapPayModal 컴포넌트에  지정해놨다.

 

 

 

📌 삽질기 

 const handlePayModalOff = (e) => {
   
    if (e.target !== e.currentTarget) return;
    
    else setIsPayModalClicked(false);
    }
  };

 

처음엔 이렇게 e.target 이 e.currentTarget 즉 내가 이벤트를 건 element , 내가 클릭 한 element 를 비교하는 방법을 생각해냈는데 .

이 패턴이 explorer에서 동작이 안된다고 해서 아직까진 위험하다고 한다.. (익스플로러....

(상) 모달 외 클릭시  (하) 모달 영역 클릭 시

 

 

그 외 바깥 영역에 검정색 막을 씌운 효과가 없을 때 유용한 useRef 사용기는 https://rrecoder.tistory.com/141?category=950210이 게시글을 참고해 주시길! 

 

 

 

 

📌 전체 코드

const ReservationMain = () => {
  const [roomData, setRoomData] = useState();
  const [isPayModalClicked, setIsPayModalClicked] = useState(false);

  useEffect(() => {
    const fetchData = API.get.room();
    fetchData.then((res) => setRoomData(res));
  }, []);

  const handlePayModalOff = (e) => {

    const clicked = e.target.closest('.paymodal');

    if (clicked) return;
    
    else {
      setIsPayModalClicked(false);
    }
  };

  return (
    <ReservationMainDiv>
      <AvailableRoom
        setIsPayModalClicked={setIsPayModalClicked}
        roomData={roomData}
      />
      <RoomMap roomData={roomData} />
      {isPayModalClicked && (
        <PayModalWrapper
          className="paymodalWrapper"
          onClick={(e) => handlePayModalOff(e)}
        >
          <RoomPayModal />
        </PayModalWrapper>
      )}
    </ReservationMainDiv>
  );
};