자바스크립트의 이벤트 전파

자바스크립트는 이벤트 전파는
root(Window) -> target -> root 의 과정을 거친다

1. 캡처링: 처음 root -> target으로 내려오는 이벤트 전파 과정
2. target: 해당 이벤트가 발생한 html 태그에서 가장 깊은 영역의 엘리먼트를 target이라고 부른다
3. 버블링: target -> root로 이벤트가 떠오른는 모양새를 띈다고 하여 버블링이라고 부른다

이벤트 위임

이벤트 위임은 이벤트 버블링 단계를 활용하여
이벤트가 발생한 곳이 아닌 상위 엘리먼트에서 관리하는 방법
이벤트 리스너의 강력한 기능..

리액트의 이벤트 위임

https://bityoungjae.medium.com/react%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84-b08f84e16250

https://github.com/facebook/react/issues/13635

리액트는 모든 이벤트를 이벤트 위임으로 document 레벨에서 관리한다고 한다..

모달 구현

react portals를 다시 사용해보면서 구현할까 했는데
처음 modal 만들면서 바깥 영역 클릭 시 닫힘 구현이 어려웠던게 생각나면서
신입 사원으로써 초심으로..

Layout 영역 클릭 시 isModal을 !isModal로 변경할 수 있도록
간단하게 구현해봤다

event.stopPropagation();

을 사용했는데, 이벤트 위임을 위한 버블링을 멈추는 기능이기 때문에
되도록 사용을 지양하는 것이 좋다

// InputModal

import Modal from "../Modal";

import { isModalState } from "../../../states/frigeState";
import { useRecoilState } from "recoil";


const InputModal = () => {
  const [isModal, setIsModal] = useRecoilState(isModalState);

  return (
    <div>
      <button
        type="button"
        onClick={(event) => {
          event.stopPropagation();
          setIsModal(!isModal);
        }}
      >
       버튼
      </button>
      {isModal && <Modal />}
    </div>
  );
};

export default InputModal;

import NavBar from "./NavBar";
import { Outlet } from "react-router-dom";

import styled from "styled-components";

import { useRecoilState } from "recoil";
import { isModalState } from "../../states/frigeState";

const Layout = () => {
  const [, setIsModal] = useRecoilState(isModalState);
  return (
    <div>
      <NavBar />
      <Main onClick={() => setIsModal(false)}>
        <Outlet />
      </Main>
    </div>
  );
};
export default Layout;