🌟 모달: useRef()로 DOM 지정하여 모달 창 닫기

일전에 브라우저 크기를 줄여도 헤더를 따라다니는 모달을 구현했었는데,
잘 되다가 어느새 보니 위치가 안 맞는게 아닌가...
아무리 position을 변경해 가며 삽질을 해도 안되길래 모달 클로징 방식을 바꿨다.

기존 방식

기존에는 LogOutModal 컴포넌트에서 컨텐츠 박스인 modal-logout-content-1의 상위 요소, 즉 박스 바깥을 클릭할 경우 모달이 클로징되게 했었다.

📍 Navigation.js

import { useState } from "react";
import LogOutModal from "./Modal/LogOutModal";

const Navigation = ({ userObj }) => {
  
  //Log Out Modal
  const [isOpenLogOutModal, setIsOpenLogOutModal] = useState(false);

  const handleOpenLogOutModal = () => {
    setIsOpenLogOutModal((prev) => !prev);
  };

  const handleCloseLogOutModal = () => {
    setIsOpenLogOutModal(false);
  }
  
  return (
    
    //생략
    
    <LogOutModal
      userObj={userObj}
      onClose={handleCloseLogOutModal}
      show={isOpenLogOutModal}
      />
    
    //생략
    

📍 LogOutModal.js

const LogOutModal = ({ show, userObj, onClose }) => {
  
  //생략
  
  return (
    <div className={`modal-layout ${show ? "show" : ""}`} onClick={onClose}>
      <div className="modal-layout-inside">
        <div className="modal-logout">
          <div
            className="modal-logout-content-1"
            onClick={(e) => e.stopPropagation()}
          >
            //생략

📍 scss

.modal-layout {
  z-index: 999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  opacity: 0;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
  
  .modal-layout-inside {
    position: fixed;
    left: 0;
    right: 0;
    top: 68%;
    display: flex;
    
    .modal-logout {
      position: sticky;
      left: -13px;
      
      .modal-logout-content-1 {
        width: 300px;
        
        //생략
      

🥺 로그아웃 모달을 다룰 때 아래 두 가지를 동시에 구현하고 싶었다.

1. 모달이 헤더의 프로필 사진 위에 딱 달라 붙어 있을 것.

2. 모달 컨텐츠 박스 외부 클릭 시 모달 창이 닫힐 것.

잘 되던게 왜 갑자기 안되는 걸까, 실은 원래부터 코드가 이상했는데 이상하게 잘 작동했던건 아닐까 싶기도 하다...🥲
안타깝게도 전에 잘되던 이 코드로는 1번이 불가능하게 되어버렸다.

position을 바꾸며 계속적인 삽질을 했지만 계속적인 실패에 진절머리가 날 즈음... 모달 클로징 방식을 바꾸기로 했다.

클로징 방식 바꿔서 문제 해결

📍 Navigation.js

import { useEffect, useRef, useState } from "react";
import LogOutModal from "./Modal/LogOutModal";

const Navigation = ({ userObj }) => {
  
  const outsideOfLogOutModal = useRef();
  
  //Log Out Modal
  const [isOpenLogOutModal, setIsOpenLogOutModal] = useState(false);

  const handleOpenLogOutModal = () => {
    setIsOpenLogOutModal((prev) => !prev);
  };

 const handleCloseLogOutModal = ({ target }) => {
    if (isOpenLogOutModal && !outsideOfLogOutModal.current.contains(target))
      setIsOpenLogOutModal(false);
  };
  
  useEffect(() => {
    window.addEventListener("click", handleCloseLogOutModal);
    return () => {
      window.removeEventListener("click", handleCloseLogOutModal);
    };
  });
  
  return (
    
    //생략
    
    <div ref={outsideOfLogOutModal}>
      <LogOutModal userObj={userObj} show={isOpenLogOutModal} />
    </div>
    
    //생략
    

• const outsideOfLogOutModal = useRef();
useRef()를 사용하면 DOM에서 내가 원하는 요소를 지정할 수 있다.
  모달 컴포넌트에 해당하는 영역을 포함한 요소를 지정하기 위해 outsideOfLogOutModal라고 변수 이름을 주고 useRef()를 사용해 보자.

• window.addEventListener("click", handleCloseLogOutModal);
  브라우저에 열려있는 window 객체, 즉 브라우저 화면을 클릭하면 handleCloseLogOutModal 이벤트가 실행이 된다.

• 모달을 열었을 때와 닫았을 때의 outsideOfLogOutModal.current 차이를 알아보기 위해 콘솔에 찍어 봤다.
  모달이 보이고 안보이고의 차이(.show)일 뿐, 클릭이벤트가 실행될 때 useRef()로 가리키는 DOM요소는 똑같이 모달컴포넌트 부분임을 알 수 있다.
  

• if (isOpenLogOutModal && !outsideOfLogOutModal.current.contains(target))
  isOpenLogOutModal의 state가 true, 즉, 로그아웃 모달이 열렸을 때,
  그리고 동시에 outsideOfLogOutModal.current.contains(target)이 false일 때, 즉, 클릭한 타겟이 모달 컴포넌트가 속한 부분이 아닌 모달의 외부를 클릭했을 때 모달을 클로징한다.

  🌟 contains 메서드는 이벤트의 타겟이 ref에 속해 있는지 즉, 자녀인지 알려 주는 메서드이다.
  따라서 LogOutModal 컴포넌트 상단에 div를 하나 새로 만들고, 그 div에 ref를 작성하여 클릭 이벤트가 적용될 영역을 설정하면 된다.

📍 LogOutModal.js

const LogOutModal = ({ show, userObj }) => {
  
  //생략

  return (
    <div className={`modal-layout ${show ? "show" : ""}`}>
      <div className="modal-logout">
        <div className="modal-logout-content-1">

기존에 있던 onClose 프로퍼티는 제거했다.

📍 scss

.modal-layout {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 68vh;
  display: flex;
  opacity: 0;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
  
  .modal-logout {
    position: fixed;
    top: 68vh;
    
    .modal-logout-content-1 {
      width: 300px;
      
      //생략

• 상위 요소인 header가 position: relative인건 동일하다.

• 먼저 모달 컴포넌트 최상단 div인 modal-layout에 position: absolute를 주어 부모인 헤더에 붙인다.

• 그러고나서 컨텐츠 박스 바로 상단 div인 modal-logout에 position: fixed를 줘서 헤더 영역의 뷰포트에 고정시킨다.

  🌟 전체의 바깥 부분을 클릭했을 때만 모달이 닫히기 때문에 컨텐츠 박스 상단 div들에는 height 값을 주지 말아야 한다. 기존에 했던 방식과 완전 반대다.

  
  

휴 어쨌든 문제 해결 🥲

🥺 휴 이제 둘 다 된다.

1. 모달이 헤더의 프로필 사진 위에 딱 달라 붙어 있을 것.

2. 모달 컨텐츠 박스 외부 클릭 시 모달 창이 닫힐 것.

자잘자잘한 오류가 참 많다.
과연 나는 이 프로젝트를 잘 마무리 할 수 있을 것인가...!