useEffect 2부

useScrool

유저가 스크롤해서 뭔가를 지나쳤을때 색상을 바꾸거나 무엇이든지 할 필요가있을때 사용

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const useScroll = () => {
  const [state, setState] = useState({ x: 0, y: 0 });
  const onScroll = event => {
    setState({ y: window.scrollY, x: window.scrollX });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    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" }}>Hi</h1>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

useFullScreen

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

export const useFullscreen = callback => {
  const element = useRef();
  const runCb = isFull => {
    if (callback && typeof callback === "function") {
      callback(isFull);
    }
  };
  const triggerFull = () => {
    if (element.current) {
      if (element.current.requestFullscreen) {
        element.current.requestFullscreen();
      } else if (element.current.mozRequestFullScreen) {
        element.current.mozRequestFullScreen();
      } else if (element.current.webkitRequestFullscreen) {
        element.current.webkitRequestFullscreen();
      } else if (element.current.msRequestFullscreen) {
        element.current.msRequestFullscreen();
      }
      runCb(true);
    }
  };
  const exitFull = () => {
    document.exitFullscreen();
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    runCb(false);
  };
  return { element, triggerFull, exitFull };
};

const App = () => {
  const { element, triggerFull, exitFull } = useFullscreen();
  return (
    <div className="App">
      <div ref={element}>
        <img src="data:image/jpeg;base64,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" />
        <button onClick={exitFull}>Exit FullScreen</button>
      </div>
      <button onClick={triggerFull}>Make FullScreen</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);