[ React Hook ] 4. usePreventLeave

# usePreventLeave의 기능

 

export const usePreventLeave = () => {
    const listener = (event) => {
        event.preventDefault();
        event.returnValue = "";
    };
    const enablePrevent = () =>
        window.addEventListener("beforeunload", listener);
    const disablePrevent = () =>
        window.removeEventListener("beforeunload", listener);
    return { enablePrevent, disablePrevent };
};

usePreventLeave는 웹사이트를 나가려고 할 때 알람문구를 띄워 한번 더 묻는 기능이 필요할때 사용한다.

 

useState나 useEffect를 사용하지 않은 순수함수로 만든 hook이다.

 

 

# 설명

 

const listener = (event) => {
        event.preventDefault();
        event.returnValue = "";
    };

우선 리스너 함수를 만든 후 기본옵션을 막아준다.

 

전달인자로부터 returnValue = ""; 를 해준다. 만약 이 작업을  하지않는다면,

 

이 후에 사용될 이벤트인 " beforeunload " 가 실행되지 않는다. 

 

 

const enablePrevent = () =>
    window.addEventListener("beforeunload", listener); //이벤트 추가
const disablePrevent = () =>
    window.removeEventListener("beforeunload", listener); //이벤트 삭제

이 후 이벤트 추가 함수와(enablePrevent), 삭제 함수(disablePrevent)를 만들어준다.

 

beforeunload 가 되면 listener함수를 실행하도록 만들면 된다.

# 사용예시

 

	const usePreventLeave = () => {
    
    	... // (내용 생략)
        
        return { enablePrevent, disablePrevent };
    };
    
    const {enablePrevent, disablePrevent} = usePreventLeave();
    
	<button onClick={enablePrevent}/>
    <button onClick={disablePrevent}/>

usePreventLeave는 enablePrevent와 disablePrevent를 반환하고

 

사용할때는 간단하게 사용하기 위해서 구조분해할당을 사용한다.

 

<button onClick={enablePrevent}/> 를 클릭하면 이벤트가 실행돼서 alert처럼 알람문구가 뜨게되고

 

취소를 누르면 웹사이트를 유지, 승인을 누르면 웹사이트를 나간다.

 

반대로 <button onClick={enablePrevent}/> 를 누른 후에 <button onClick={disablePrevent}/> 를 누르면

 

추가되었던 이벤트가 취소되기 때문에 웹사이트를 나가면 알람문구가 뜨지않고 바로 나가진다.