지금까지 사용한 몇 가지 Custom React Hooks.

안녕하세요,
우리 모두 알다시피 ReactJS는 현재 가장 인기 있는 프론트엔드 프레임워크입니다. 몇 년 전 React devs - React Hooks에서 강력한 기능을 소개했습니다. 여기서 그들은 클래스 기반 프로그래밍 접근 방식에서 게임 체인저로 판명된 함수 기반 방식으로 이동했습니다!

useState, useEffect, useContext 등과 같은 React의 내장 후크 외에도 개발자는 Custom Hooks라고 하는 자체 후크를 작성할 수 있습니다.

이 게시물에서 저는 제가 가장 좋아하는 커스텀 후크를 언급할 것입니다. 이것은 제 프로젝트에 유용하다고 생각합니다.

useLocalStorage:

사용법은 useState와 비슷하지만 가상 상태에 값을 저장하는 대신 브라우저의 로컬 저장소에 저장하고 페이지 새로 고침 시 값이 유지됩니다.

예시:
사이트에 어두운 테마 모드가 있는 경우 후크를 사용하여 테마의 스위치를 유지할 수 있습니다. 따라서 사용자가 사이트를 다시 방문할 때마다 테마가 자동으로 적용됩니다.

Source code & usage

useMediaQuery

CSS의 미디어 쿼리를 알고 있다면 사용 정보를 얻을 수 있습니다. 이름 자체에서. 기본적으로 장치 화면의 너비에 따라 무언가를 조건부로 렌더링하고 싶을 때 사용할 수 있습니다.

예시:
CSS를 사용하지 않고 화면 크기가 768px를 초과할 때마다 모바일 메뉴 구성 요소를 렌더링 해제할 수 있습니다.

Source code & usage

useClickOutside

이 후크를 사용하면 특정 요소 외부의 클릭 이벤트를 감지할 수 있습니다.

예시:
모달/대화 상자 구성 요소가 있는 경우 사용자가 기본 요소 외부를 클릭할 때마다 닫히기를 원합니다.

Source code & usage

스크롤다운 사용

스크롤이 지정된 값에 도달하면 이 후크는 true를 반환합니다.

예시:
위로 스크롤할 수 있는 플로팅 버튼이 있지만 페이지가 초기 위치에서 약간 아래로 스크롤될 때만 표시하려는 경우.

소스 코드:

import { useState, useEffect } from 'react';

const useScrollDown = (height) => {
  const [boolean, setBoolean] = useState(false);

  const handler = () => {
    if (window.pageYOffset >= height) {
      setBoolean(true);
    } else {
      setBoolean(false);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return boolean;
};

export default useScrollDown;

용법:

const isScrollDown = useScrolldown(90);

return (
  <div>
    {isScrollDown ? "It's down!" : "Initial position."}
  </div>
)