[유용한 기능]useNotification, useFullscreen 내가 해냄

인트로

유용한 기능 2탄입니다. 이 친구들은 만들면서 재밌었어요. 간단한데 눈에 확확보여 최고야..

---

useNotification

이벤트를 발생시켰을 때 브라우저에 notification을 띄워줍니다.
콘솔창에서도 확인할 수 있습니다. 만약에 알림이 안 뜬다? 크롬 > 설정 > 개인 정보 보호 및 보안 > 사이트 설정 > 알림 을 확인하세요.
notification에 대한 자세한 내용은 아래 문서에서 확인하세요.

Notification - Web APIs | MDN

그럼 이제 코드를 봅시다.

const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    return;
  }
  const fireNotif = () => {
    if (Notification.permission !== "granted") {
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          new Notification(title, options);
        } else return;
      });
    } else {
      new Notification(title, options);
    }
  };
  return fireNotif;
};

function App() {
  const triggerNofitif = useNotification("I want to Sleep", {
    body: "go to bed",
  });
  return (
    <div>
      <button onClick={triggerNofitif}>request Noti</button>
    </div>
  );
}

useNotification
파라미터로 title과 options을 띄웁니다. 
fireNotif 함수를 반환합니다.
fireNotif
Notification.permission value로는 granted | default | denied 총 세 가지가 있습니다.
만약 value가 granted라면 허용이니 바로 notification을 띄웁니다.
아닐 경우 requestPermission()을 보냅니다. 이런 식으로 알림 권한을 요청하는 겁니다. 
허용을 누른다면 granted가 들어오고 차단을 누른다면 denied가 되겠죠. 허용을 눌렀을 경우 notification을 보여줍니다.

Notification()
Notification 객체 인스턴스를 생성합니다.
첫 번째 인자는 말 그대로 Notification의 title입니다. 가장 상단 쪽에 보여집니다.
두 번째 인자는 적용할 사용자 지정 설정을 포함하는 옵션 개체입니다. 가능한 옵션은 dir, lang, badge, body, tag, icon.... 등등 다양합니다. 문서를 참고해 주세요.
 
이제 useNotification이 반환해 주는 함수를 변수에 저장합니다. 그리고 click 이벤트가 발생하면 해당 함수가 호출되도록 해주면 완성입니다. 
영상을 찍으면 Notification이 안 뜨네요.. 너무 슬프지만 캡처로.. 일단 동작을 잘하는 걸 확인할 수 있습니다.

useFullscreen

대망의 fullscreen! 솔직히 이거 만들 때 가장 재미있었습니다. 이미지를 전체화면으로 보여주는 기능입니다.
바로 고고해보죠.

const useFullscreen = () => {
  const element = useRef();
  const triggerFull = () => {
    if (element.current) {
      const { current } = element;
      current.requestFullscreen();
    }
  };
  const exitFull = () => {
    document.exitFullscreen();
  };
  return { element, triggerFull, exitFull };
};

function App() {
  const { element, triggerFull, exitFull } = useFullscreen();
  return (
    <div>
      <img
        ref={element}
        onClick={exitFull}
        src="./jip.jpg"
        alt="집에가고싶다"
      />
      <button onClick={triggerFull}>Make fullscreen</button>
    </div>
  );
}

useFullscreen
element(요소), triggerFull(함수), exitFull(함수)를 반환합니다.
위 코드에서 element.current는 img 노드를 가리킵니다.
tirggerFull
element.current가 falsy 값이 아닌 경우 해당 요소에 대해 requestFullscreen() 메서드를 실행합니다. 
Element.requestFullscreen() 메서드를 사용하면 해당 요소를 전체화면모드로 만들어줍니다.
exifFull
전체화면에서 나가는 함수입니다.
Document.exitFullscreen()는 전체 화면 모드로 표시되고 있는 문서의 요소의 전체 화면 모드를 해제시킵니다.
Element.requestFullscreen()의 반대입니다.
 
그래서 버튼을 클릭할 경우 img를 전체화면으로 보여주고 이미지를 클릭할 경우 다시 원래대로 돌아오는 기능을 완성했습니다.

귀여워..

---

강의가 아주 유익하고 재밌네요.. 꿀잼기능이 너무 많다...
이게 무료..?

 
노마드코더 실전형 리액트 훅 강의 내용을 참고하였습니다.