Hook 사용예제: usePreventLeave

창을 닫거나 새로고침 하는 등, "beforeunload"이벤트가 발생했을 때 재확인하는 기능을 구현하였다.

...
const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();//event의 기본동작이 trigger되지 않는다.
    event.returnValue ="";//기본적으로는 이 부분은 없어도 된다. but chrome에서는 사용해야 함
  }
  
  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  //window는 beforeunload이벤트를 갖게되었고, beforeunload이벤트(창을 닫거나, 새로고침 등)가 발생했을 때 listener함수를 호출할 수 있다. 
 
  const disablePrevent = () => window.removeEventListener("beforeunload", listener);
  //beforeunload이벤트가 발생했을 때 listener함수가 호출되는걸 제거한다.

  return { enablePrevent, disablePrevent };
}

const App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();//객체 구조 분해 할당
  return(
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>      
    </div>
  )
}

export default App;

Event.returnValue

event속성인 returnValue는 이 이벤트에 대한 기본 작업이 금지되었는지 여부를 나타낸다. 기본적으로 true로 설정되어 있다. "beforeunload" 이벤트의 기본 작업은 창을 그냥 바로 닫는 것이다. 따라서 returnValue에 false를 줌으로써 기본 작업을 수행하지 않고 창을 닫을지 재확인한다.

EventListener

이름 그대로 이벤트를 항상 듣고있다가, 특정 이벤트가 발생하면 등록했던 이벤트 리스너가 실행되어, 사용자와 상호작용하기 시작한다.

EventListener 추가
"EventListener를 추가할 대상".addEventListener("이벤트 타입", 이벤트 핸들러);

EventListener 제거(동일한 이벤트 타입과 이벤트 핸들러를 적어주어야 한다.)
"EventListener를 제거할 대상".removeEventListener("이벤트 타입", 이벤트 핸들러);

예시)

  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  //window는 beforeunload이벤트를 갖게되었고, beforeunload이벤트가 발생했을 때 listener함수를 호출할 수 있다.
 
  const disablePrevent = () => window.removeEventListener("beforeunload", listener);
  //beforeunload이벤트가 발생했을 때 listener함수가 호출되는걸 제거한다.

이벤트 핸들러에 자동으로 event가 들어가는 이유
이벤트가 발생하면 브라우져가 이벤트 정보를 담은 객체를 생성해서 핸들러의 인수 형태로 전달해 주기 때문에 event가 자동으로 들어가진다.