[노마드코더]실전형 리액트 Hooks 10개 - (useScroll & useFullscreen)

useScroll

useScroll은 사용자가 스크롤 동작을 할 때, 특정 조건에 따라 무엇인가 작동시킬 수 있는 hook이다.

• 다음 예시에서는 window.scrollY를 활용하여 사용자가 스크롤로 그 값이 특정 구간으로 설정한 100 보다 크게 되면 글자의 색상을 빨강으로 바꾼다.

// app.js

import { useEffect, useState } from "react";

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  });

  const onScroll = () => {
    setState({ y: window.scrollY, x: window.scrollX });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return state;
};

const App = () => {
  const { y } = useScroll();
  return (
    <div className="APP" style={{ height: "1000vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>
        useScroll Example
      </h1>
    </div>
  );
};

export default App;

---

useFullscreen

useFullscreen은 useRef를 통해 참조하는 element를 전체화면으로 변환시키는 hook이다.

• 우선, useRef를 통해 이미지와 버튼을 묶은 div를 참조하여 "Make FullScreen" 버튼을 클릭하면 전체화면으로 변환시키고, "Exit FullScreen" 버튼 클릭시 다시 돌아오도록 만든다.
• 또한, onFulls 함수를 통해 전체화면인지 아닌지를 true,false를 활용하여 console로 찍어준다.

// app.js

import { useRef } from "react";

const useFullscreen = (callback) => {
  const element = useRef();

  const runCB = (isFull) => {
    if (callback && typeof callback === "function") {
      callback(isFull);
    }
  };

  const triggerFull = () => {
    // element와 함께 requestFullscreen을 활용하지만, 빠져나오고 싶을땐 document 사용
    if (element.current) {
      // firefox 같은 경우는 requestFullScreen()이 아니다.
      if (element.current.requestFullscreen) {
        element.current.requestFullscreen();
      } else if (element.current.mozRequestFullScreen) {
        element.current.mozRequestFullScreen(); //firefox
      } else if (element.current.webkitRequestFullscreen) {
        element.current.webkitRequestFullscreen(); // opera
      } else if (element.current.msRequestFullscreen) {
        element.current.msRequestFullscreen(); //microsoft
      }

      runCB(true);
    }
  };
  const exitFull = () => {
    const checkFullScreen = document.fullscreenElement;
    if (checkFullScreen !== null) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); //firefox
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen(); // opera
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); //microsoft
      }
      runCB(false);
    }
  };
  return { element, triggerFull, exitFull };
};

const App = () => {
  const onFulls = (isFull) => {
    console.log(isFull ? "We are full" : "We are small");
  };
  const { element, triggerFull, exitFull } = useFullscreen(onFulls);
  return (
    <div className="APP" style={{ height: "1000vh" }}>
      <div ref={element}>
        <img src="https://i.ibb.co/R6RwNxx/grape.jpg" alt="grape" width="250" />
        <br />
        <button onClick={triggerFull}>Make FullScreen</button>
        <button onClick={exitFull}>Exit FullScreen</button>
      </div>
    </div>
  );
};

export default App;

 

---

Reference

https://nomadcoders.co/react-hooks-introduction/lectures/1599

All Courses – 노마드 코더 Nomad Coders