(React Hooks) useEffect - useScroll / useFullscreen

useScroll 

 

 

  useEffect(() => {

    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);

  }, []);

addEvent를 하면 같은이름과 같은 handler로 removeEvent를 꼭 해줘야한다.

 

 

 

  const onScroll = () => {

    console.log("x : ", window.scrollX, "y :" , window.scrollY);

  }

window를 통해서 scroll의 좌표값에 접근을 하고 스크롤위치가 변경이 될때마다 좌표값이 출력된다.

 

 

 

 

setState({x : window.scrollX, y : window.scrollY});

setState를 통해 y값을 변경하고 리턴값을 통해 const {y} = useScroll(); 에 갱신이 된다.

 

 

 

 

const useScroll = () => {

  const [state, setState] = useState({

    x : 0,

    y : 0

  });

  const onScroll = () => {

    console.log("x : ", window.scrollX, "y :" , window.scrollY);

    setState({x : window.scrollX, y : window.scrollY});

  }

  useEffect(() => {

    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);

  }, []);

  return state;

}

export default function App() {

  const {y} = useScroll();

  return (

    <div className="App" style={{height : "1000vh"}}>

      <h1 style={{position : "fixed", color : y > 100 ? "red" : "blue"}}>hi</h1>

    </div>

  );

}

useScroll 전체코드

 

 

 

 

 

useFullscreen

 

const useFullscreen = () => {

  const element = useRef();

  const trigerFull = () => {

    if (element.current){

      element.current.requestFullscreen();

    }

  };

  return {element, trigerFull};

};

전체화면으로 만들기 위해서 element와 함께 requestFullscreen()을 작성

 

 

 

 

  const exitFull = () => {

    document.exitFullscreen();

  }

  return {element, trigerFull, exitFull};

전체화면에서 나오기 위해서 document와 함께 exitFullscreen()을 작성

 

 

 

    <div className="App" style={{height : "1000vh"}}>

      <div ref={element}>

        <img width="250" src="이미지링크"></img>

        <div class="Exit-btn">

          <button onClick={exitFull}>Exit fullscreen</button>

        </div>

      </div>

      <div class="Make-btn">

        <button onClick={trigerFull}>Make fullscreen</button>

      </div>

    </div>

div 에 ref={element}를 줘서 exit 버튼과 이미지를 한 공간에 묶어준다

같은 div안에 없으면 전체화면 이후에 출력 X

 

 

 

    if (element.current){

      element.current.requestFullscreen();

      if(callback && typeof callback === "function"){

        callback(true);

      }

    }

    document.exitFullscreen();

    if(callback && typeof callback === "function"){

      callback(false);

    }

true 와 false를 반환하여

 

  const onFullS = (isFull) => {

    console.log(isFull ? "We are full" : "We are small");

  }

onFullS() 함수에서 반환값에 따른 log를 출력해준다.

 

 

 

const useFullscreen = (callback) => {

  const element = useRef();

  const trigerFull = () => {

    if (element.current){

      element.current.requestFullscreen();

      if(callback && typeof callback === "function"){

        callback(true);

      }

    }

  };

  const exitFull = () => {

    document.exitFullscreen();

    if(callback && typeof callback === "function"){

      callback(false);

    }

  }

  return {element, trigerFull, exitFull};

};

export default function App() {

  const onFullS = (isFull) => {

    console.log(isFull ? "We are full" : "We are small");

  }

  const {element, trigerFull, exitFull} = useFullscreen(onFullS);

  return (

    <div className="App" style={{height : "1000vh"}}>

      <div ref={element}>

        <img width="250" src="이미지링크"></img>

        <div class="Exit-btn">

          <button onClick={exitFull}>Exit fullscreen</button>

        </div>

      </div>

      <div class="Make-btn">

        <button onClick={trigerFull}>Make fullscreen</button>

      </div>

    </div>

  );

}

useFullscreen 전체코드