리액트 모달을 열자마자 자동으로 닫힙니다.. 이유가 무엇인가요?

Question

안녕하세요 개발초보가 질문드립니다..<개요>리액트에서 popover를 구현했는데, popover를 열기 위한 버튼을 누르자마자 자동으로 popover가 닫힙니다..(원하는 결과물: https://mui.com/material-ui/react-popover/#basic-popover)<코드>아래는 부모 컴포넌트입니다. 버튼을 누르면 Popover 컴포넌트가 랜더링됩니다import { useState } from "react"; import Popover from "./Popover"; const TaskButton = () => { const [isPopoverShown, setIsPopoverShown] = useState(false); const popoverOpenHandler = () => { setIsPopoverShown(true); }; const popoverCloseHandler = () => { setIsPopoverShown(false); }; return (

{isPopoverShown && ( hello )}

); }; export default TaskButton; 아래는 자식 컴포넌트인 Popover입니다.useEffect 내부에 document.addEventListener("click", 함수)를 입력해서,클릭이 발생한 event.target이 popover와 연결된 ref와 일치하지 않을때 onClose함수를 triger하고자 했습니다import React, { useEffect, useRef } from "react"; const Popover =({ onClose, children }) => { const popoverRef = useRef(null); useEffect(() => { const pageClickEvent = (event) => { if (popoverRef.current !== event.target) { onClose(); } }; document.addEventListener("click", pageClickEvent); return () => { document.removeEventListener("click", pageClickEvent); }; }, [onClose]); return

{children}

; } export default Popover;<문제>popover 컴포넌트를 열기 위해 버튼을 누르면, 곧바로 이벤트 리스너가 trigger되어서 닫혀버립니다..<해결 & 궁금한점>document.addEventListener("mousedown", pageClickEvent);document.addEventListener("click", pageClickEvent, true); 위의 코드처럼 이벤트 리스너의 이벤트를 mouseup이나 mousedown으로 고치거나,이벤트리스너의 capture옵션을 true로 활성화하면 제가 원하는대로 작동됩니다그렇다면 이벤트의 버블링이나, click이벤트에서 문제가 발생하는 것 같은데, 정확히 무엇이 문제인지 모르겠습니다..문제가 발생한 코드에서 제 생각은,popover 컴포넌트가 mount되기 이전에는 이벤트리스너가 비활성화 상태이기 때문에, button의 클릭 이벤트가, 이벤트리스너를 trigger하지 않아야 할 것 같습니다.하지만 console을 찍어보면 popover 컴포넌트가 랜더링되고, 곧이어 이벤트 리스너가 작동합니다.무엇이 문제인지, 올바른 해결방법이 무엇인지 알려주시면 감사하겠습니다 ㅜㅜㅜㅜ

codezzzz · Answer

버튼도 document 일부라 document.addEventListener("click", pageClickEvent); 걸리는거 같네요

codezzzz · Answer

import { useEffect, useRef } from "react"; function useOutSideClick({ callback }:) { const componentRef = useRef(null); useEffect(() => { document.addEventListener("click", handleClick); return () => document.removeEventListener("click", handleClick); function handleClick(e) { if (componentRef && componentRef.current) { const ref: any = componentRef.current; if (!ref.contains(e.target)) { callback(); } } } }, [callback]); return [componentRef]; } export default useOutSideClick; /// const [ref] = useOutSideClick({ callback: popoverCloseHandler, });

{isPopoverShown && hello}

이렇게 하시면 될꺼같네요.

songline · Answer

state가 갱신되어 화면이 새로 생성된 시점에서도 클릭 이벤트가 전파되나보네요. 여튼 해결 방법은 아래와 같이 버튼의 전파를 막는 것이 가장 간단하지 않을까 싶습니다. return (

{isPopoverShown && ( hello )}

); };여담으로 onClose라는 이름은 닫힐 때를 의미하므로 클릭 시 닫히도록 만들 때 사용하기는 부적절합니다. 그보다는 onClcik 이라는 용어를 사용하고, 대신 닫힐 때 무슨 부수 효과를 주고자 한다면 그 때 onClose를 사용하시는게 좋습니다.수정: 어제는 단순 현상 파악만을 위한 답변을 달았는데 좀 더 효율적으로 개선한다면 아래와 같이 할 수 있겠습니다. (일부 코드를 단순화 하였습니다.)const App = () => { return (<> ) } /// const TaskButton = () => { const [isPopoverShown, setIsPopoverShown] = useState(false); return (

{isPopoverShown && ( setIsPopoverShown(false)}> hello )}

); }; /// const Popover =({ onClick, children }) => { const popoverRef = useRef(null); return (

{children}

) }

리액트 모달을 열자마자 자동으로 닫힙니다.. 이유가 무엇인가요?

3개의 답변

#modal 목록