[React] 특정 영역을 제외한 영역 클릭 이벤트 구현하기

Airbnb 클론 코딩을 진행하면서 로그인 드롭다운 메뉴를 구현하다가 해당 메뉴 밖의 어느 부분을 클릭하더라도 드롭다운 메뉴가 닫히도록 구현해보기로 다짐했다. useRef와 EventListener를 사용하여 구현했다.

 

기본적인 원리는 다음과 같다.

1. <특정 영역을 제외한 영역>에서 "특정 영역"에 ref를 부여한다.
2. 현재 페이지에서 클릭할 때마다 이벤트가 감지되도록 구현하고, 그때마다 close 함수를 호출한다.
3. close 함수에서는 ref 영역(특정 영역)이 이벤트가 감지된 영역을 포함하는 지를 확인한다.
4. 포함하지 않는다면 ref 영역(특정 영역) 외부를 클릭한 것이므로 이때 메뉴가 닫히도록 구현한다.

---

1. <특정 영역을 제외한 영역>에서 "특정 영역"에 ref를 부여한다.

나의 경우, 위에 두 영역을 "특정 영역"으로 설정해서 useRef를 2개 설정했다.

---

2. 현재 페이지에서 클릭할 때마다 이벤트가 감지되도록 구현하고, 그때마다 close 함수를 호출한다.

이 부분은 EventListener를 사용했다.

useEffect(() => {
        window.addEventListener("click", closeMember);

        return () => {
            window.removeEventListener("click", closeMember);
        };
    });

---

3. close 함수에서는 ref 영역(특정 영역)이 이벤트가 감지된 영역을 포함하는 지를 확인하고, 포함하지 않는다면 ref 영역(특정 영역) 외부를 클릭한 것이므로 이때 메뉴가 닫히도록 구현한다.

EventListener로부터 넘어온 event를 이용하여 ref가 event를 포함하는 지를 확인했다.

const closeMember = (e) => {
        if (
            openMemberInfo && //드롭다운 메뉴가 열려있을 때
            !memberModalRef.current.contains(e.target) &&
            !memberRef.current.contains(e.target)
        )
            setOpenMemberInfo(false); //외부 영역을 클릭했을 때 드롭다운 메뉴 닫힘
    };

---