React에서 커스텀 후크를 작성하는 방법

Hooks는 한동안 React의 최신 핫스팟이었습니다. 렌더링 소품의 필요성을 줄이고(고맙습니다!) 함수 기반 구성 요소에서 상태를 가질 수 있는 것과 같은 특정 이점이 있습니다. 아직 사용하지 않았다면 계속 읽기 전에 정말 추천합니다check out the docs.

사용자 지정 후크를 사용하면 여러 구성 요소에서 재사용할 수 있는 기능을 만들 수 있습니다. 물론 기능을 재사용하는 기능만 가질 수 있지만 후크는 구성 요소 수명 주기 및 상태와 같은 항목에 '연결'할 수 있는 이점이 있습니다. 이는 일반 함수보다 React 세계에서 훨씬 더 가치 있게 만듭니다.

사용자 정의 후크를 만드는 것은 무엇입니까? 커스텀 훅은 다른 훅을 사용하는 함수일 뿐입니다. 함수에 후크를 사용하지 않으면 후크가 아니라 함수일 뿐입니다. 규칙에 따라 후크 함수의 이름은 'use'로 시작해야 합니다. 그럴 필요는 없지만 그렇지 않으면 사람들은 그것이 훅이라는 것을 쉽게 깨닫지 못할 것입니다.

커스텀 훅의 예를 보여주기 위해 실생활에서 실제로 유용할 수 있는 간단한 훅을 코딩하겠습니다.

후크를 useBodyScrollPosition이라고 합니다.

아이디어는 문서의 본문이 스크롤될 때마다 후크가 실행되어 현재 스크롤 오프셋을 반환한다는 것입니다. 이는 스크롤에 대한 응답으로 페이지에서 구성 요소를 이동하거나 어떤 식으로든 변경해야 하는 경우에 유용할 수 있습니다.

물론 컴포넌트 내에서만 이 작업을 수행할 수 있지만 후크의 주요 이점 중 하나인 다른 컴포넌트에서는 재사용할 수 없습니다.

따라서 더 이상 고민하지 않고 다음 구성 요소가 있습니다.

// use-body-scroll-position.js
import { useState, useEffect } from 'react';

export default () => {
  const [scrollPosition, setScrollPosition] = useState(null);
  useEffect(() => {
    const handleScroll = () => setScrollPosition(window.scrollY);
    document.addEventListener('scroll', handleScroll);
    return () => 
      document.removeEventListener('scroll', handleScroll);
  }, []);
  return scrollPosition;
}

useEffect는 후크가 마운트될 때 이벤트 리스너가 설정되는지 확인합니다. useEffect의 함수에 의해 반환된 함수는 후크가 마운트 해제될 때 호출되며 이벤트 리스너를 제거하여 정리됩니다. 이렇게 하지 않으면 실행될 때 마운트되지 않은 후크에 상태를 설정하려고 시도합니다.

빈 종속성 배열인 useEffect의 두 번째 인수는 후크가 처음 마운트될 때 효과가 한 번만 호출되도록 합니다. 우리는 이벤트 리스너를 계속 추가하고 싶지 않습니다!

상태는 단일 값인 스크롤 오프셋이며 이것이 후크가 반환하는 값입니다. 기본값은 null이며 후크가 처음 호출될 때 항상 반환됩니다. 이 값은 스크롤 이벤트가 있을 때만 변경되며 그때까지는 null로 유지됩니다. 스크롤하기 전에 현재 오프셋을 반환하려면 변경이 필요합니다.

스크롤 이벤트가 발생할 때마다 상태가 업데이트되고 후크 함수가 최신 상태로 다시 호출되며 스크롤 오프셋을 호출 구성 요소에 반환합니다.

다음은 구성 요소에서 사용하는 예입니다. 스크롤 값을 창 중앙에 놓고 세로로 스크롤하면 업데이트됩니다. 나는 일반적으로 인라인 스타일을 사용하지 않지만 이 게시물을 위해 하나의 파일에 모두 포함하고 싶었습니다.

import React from 'react';
import useBodyScrollPosition from './use-body-scroll-position';

export default () => {
  const scrollPosition = useBodyScrollPosition();
  const wrapperStyles = {
    height: '5000px',
  };
  const displayStyles = {
    position: 'fixed',
    width: '100%',
    top: '50%',
    transform: 'translateY(-50%)',
    fontSize: '20px',
    textAlign: 'center',
  }
  return (
    <div style={wrapperStyles}>
      <div style={displayStyles}>
        {scrollPosition !== null ? scrollPosition : 0}
      </div>
    </div>
  )
}

아래에서 해당 구성 요소가 작동합니다.



물론 후크가 아직 생산 준비가 되지 않았을 수도 있습니다. 디바운싱 또는 스크롤 위치의 술어를 기반으로 한 실행과 같은 성능 최적화를 위한 구성 옵션을 추가하고 싶을 수도 있지만 이것은 사용자 지정 후크를 만드는 것이므로 모든 것을 신경쓰지 않았습니다.

전반적으로 사용자 정의 후크를 만드는 것은 쉽습니다!

마음에 드셨나요? 그러면 내 메일링 리스트를 좋아하게 될 것입니다. JavaScript, 기술 및 경력에 대한 정기적인 뉴스레터가 있습니다. 그것을 읽는 것을 즐기는 5,000명 이상의 사람들과 함께 하세요. Signup to my list here .