이벤트 캡쳐링이 들어있는 코드인데 이해가 잘 안가서 질문드립니다 ㅜ

Question

import React, { Component } from "react"; class Layer extends Component { isPrevent = true; setPrevent = () => { this.isPrevent = false; }; hide = () => { if (!this.isPrevent) { this.props.onRequestHide(); } }; componentDidMount() { console.log("layer mount"); window.addEventListener("click", this.setPrevent, true); // window.addEventListener("click", this.setPrevent); window.addEventListener("click", this.hide); } componentWillUnmount() { window.removeEventListener("click", this.hide); window.removeEventListener("click", this.setPrevent, true); // window.removeEventListener("click", this.setPrevent); } render() { console.log("layer render "); return (

Layer

); } } class App extends Component { constructor(props) { super(props); this.state = { isShowLayer: false, }; } toggle = (isShow = !this.state.isShowLayer) => { this.setState({ isShowLayer: isShow }); console.log(isShow); }; render() { const { isShowLayer } = this.state; return (

hellow world! {isShowLayer && this.toggle(false)} />}

); } } export default App;제가 생각하는 코드 진행은 이러합니다. 1. 이벤트 캡쳐링에 의해 Layer의 setPrevent가 실행되어 isPrevent = false 가 된다. 2.이벤트 캡쳐링에 의해 Layer의 hide 가 실행되어 App의 isShowLayout을 false로 만든다. 3. 이벤트가 계속 하위로 전파되어 button의 onClick 함수가 실행된다. 4. App의 isShowLayout이 true가 되고 layout을 렌더링한다. 5.이벤트 버블링 단계가 시작되면서 Layout의 hide가 실행된다. this.toggle(false)가 실행이되고 App 컴포넌트가 리랜더링 되면서 Layout이 언마운트 된다. 하지만 버튼을 누르면 Layout 컴포넌트가 잘 랜더링이 되어서 화면에 보여지는데 그 이유를 잘 모르겠습니다..다소 긴 코드인데 여기까지 읽어주셨다면 정말 감사드리고 위 설명 중 틀린 부분 고쳐주신다면 정말 감사하겠습니다 ㅜ

kenu,전독시 · Answer

https://ko.javascript.info/bubbling-and-capturing

이벤트 캡쳐링이 들어있는 코드인데 이해가 잘 안가서 질문드립니다 ㅜ

1개의 답변

Q&A 목록