TIL | 간단한 custom hook 만들어보기 2

간단한 custom hook 만들어보기 2

이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다.

 

useScroll (scroll event를 위한 hook)

useScroll.ts

import { useState, useEffect } from "react";

export const useScroll = () => {
  // x축, y축을 초기 상탯값으로 지정
  const [scroll, setScroll] = useState({
    x: 0,
    y: 0,
  });

  const handleScroll = () => {
    // 상탯값을 각각 window.scrollX, window.scrollY값으로 업데이트 (이 부분은 필요에 따라서 수정이 가능한 것으로 보이므로 자유롭게 사용하면 될 듯하다.)
    setScroll((prev) => ({
      ...prev,
      x: window.scrollX,
      y: window.scrollY,
    }));
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return scroll;
};

Scroll.tsx

import React from "react";

import { useScroll } from "src/hooks/useScroll";

const Scroll = () => {
  const { x, y } = useScroll();
  console.log(x, y);

  return (
    <div style={{ height: "1500px" }}>
      <h1>Scroll</h1>
    </div>
  );
};

export default Scroll;

결과

---

 

useFullScreen(fullscreen을 위한 hook)

useFullScreen.ts

import { useRef } from "react";
// click의 대상을 특정 element로 특정짓고 싶지 않았기 때문에 HTMLElement를 상속하는 제네릭 타입으로 지정
// 추가로 useRef의 타입은 초깃값의 지정에 따라 RefObject, MutableObject로 나뉘게 된다.
export const useFullScreen = <T extends HTMLElement>(): {
  element: React.RefObject<T>;
  triggerFull: () => void;
} => {
  const element = useRef<T>(null!);

  // triggerFull이라는 함수는 ref dom의 current 객체가 존재할 경우 requestFullScreen 함수 실행

  const triggerFull = () => {
    if (element.current) {
      element.current.requestFullscreen();
    }
  };

  return { element, triggerFull };
};

FullScreen.tsx

import React from "react";
import { useFullScreen } from "src/hooks/useFullScreen";

const FullScreen = () => {
  const { element, triggerFull } = useFullScreen<HTMLDivElement>();

  return (
    <>
      <h1>Full Screen</h1>
      <div
        style={{ backgroundColor: "#0066ff", width: "50px", height: "50px" }}
        ref={element}
      ></div>
      <button onClick={triggerFull}>Full screen</button>
    </>
  );
};

export default FullScreen;

결과