리액트 컴포넌트 외부 클릭

Question

안녕하세요. 리액트를 시작한지 얼마 안된 초보자입니다.버튼을 클릭하면 컴포넌트가 보이고, 해당 컴포넌트의 외부를 클릭하면 안보이게 하고 싶은데외부를 클릭했을 때 아무 동작을 안하게 만들면 컴포넌트가 잘 보이긴하지만버튼을 클릭하는 순간 컴포넌트의 외부라고 인식을 해서 컴포넌트가 보이질 않습니다.혹시 왜 그렇게 되는지, 고칠 방법이 있는지 알고싶습니다. 감사합니다.function Category(props) { const [isAdd, setIsAdd] = useState(false); return (

{props.category}

{setIsAdd(true)}}>+

{isAdd ? : null}

); } export default Category;function Form() { const divRef = useRef(null); useEffect(() => { if(divRef){ console.log(divRef); // div 영역 외를 클릭했을 때 function handleClickOutside(e) { const isInside = divRef?.current?.contains(e.target); if (divRef && !isInside) { console.log('외부클릭') } } document.addEventListener("click", handleClickOutside); return () => { document.removeEventListener("click", handleClickOutside); }; } }, [divRef]); return (

); } export default Form;

songline · Accepted Answer

무언가 클릭을 함과 동시에 컴포넌트가 생성되다보니 document.addEventListener('click', ...)가 호출되자마자 클릭 이벤트가 발생한 것으로 인식한 것 같습니다. 그래서 고의로 그 타이밍을 어긋나게 하면 어떨까 싶어서 시도해봤는데 아래 방법이 유효한 것 같네요.setTimeout(() &#61;> document.addEventListener(&#34;click&#34;, handleClickOutside), 0);왜 저것이 유효한지에 대해서는 정확하진 않지만 추론해보면, 지연시간이 0ms여도 일단 저 콜백은 바로 실행되지 않고 태스크 큐 쪽으로 넘어가는데, 때문에 이벤트 루프에서 클릭 이벤트 처리가 끝난 다음에 이벤트 추가가 이루어지고 겪으신 문제를 회피할 수 있던 것이라 생각됩니다.

컴포지트 · Answer

이벤트 핸들러 함수 안 if 절에 divRef 대신 divRef?.current 로 바꾸시길. ref 객체는 항상 true 입니다. 하지만 current 는 원본이 주어지는 시점이 있습니다.

구슬 · Answer

이벤트 버블링 같은데요

아리까리 · Answer

이럴때 정석적인 방법보단 약간 우회 하는 방법을 써주는건 어떨까 싶네요.onFocus 와 onBlur를 사용해 보심은 어떨지요?

리액트 컴포넌트 외부 클릭

4개의 답변

Q&A 목록