[React Hooks - 8] useBeforeLeave 만들기

오늘 스터디한 내용은 useBeforeLeave입니다. 탭에서 마우스 커서가 떠나면 정해진 이벤트가 발생하는 구조입니다.
자주 쓸 일이 있는 것은 아니지만, 재미난 기능들을 넣을 때 사용이 가능 할 것 같다는 생각이 드네요.


useBeforeLeave 설명

  • onBefore 이름으로 callback 함수를 넘겨 받는다.
  • 함수인지 체크하는 것은 이젠 센스!!
  • Tab에서 Y 좌표가 0보다 작아지면 callback 함수를 실행합니다

전체 소스

const useBeforeLeave = (onBefore) => {
  if (typeof onBefore !== "function") return;

  const handle = (event) => {
    const { clientY } = event;
    if (clientY <= 0) {
      onBefore();
    }
  };
  useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return () => document.removeEventListener("mouseleave");
  });
};

const BeforeLeaveApp = () => {
  const begForLife = () => console.log("Do not leave");
  useBeforeLeave(begForLife);

  return (
    <div className="App">
      {content.map((section, idx) => (
        <button onClick={() => changeItem(idx)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

간단함 함수이지만 평소에 자주 쓰는 이벤트는 아니어서, 이렇게 작성해 놓으면 나중에 필요 할 때에 다른 곳에 찾으러 다니는 시간을 단축 시킬 수 있을 것 같다는 생각이 드네요..

니꼴라스 선생님 정말 짱입니다!!

감사합니다.

Sort:  

[US$140.00](▼54%)샤오미 드리미 V10 무선 청소기 / 유럽버전! / 6개월무료A/S / 무료배송/

WWW.QOO10.COM

할말 없지만 오랜만에...ㅋㅋㅋㅋ
4월 첫 월요일! 상쾌한 아침입니다~

4월 첫 월요일 맞네요!! ^^ 오늘도 내일도 항상 즐거운 독거형님이 되시길 바래요~~ ^^

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 56.81%, voting power : 95.08%, steem power : 1741983.25, STU KRW : 1200.
@happyberrysboy staking status : 7750 KRWP
@happyberrysboy limit for KRWP voting service : 46.5 KRWP (rate : 0.006)
What you sent : 50 KRWP
Refund balance : 3.5 KRWP [52624087 - c9f6cd498a430e22746f337d60b2b8e9b155e4a3]