사용자 지정 후크 소개

이 블로그 게시물은 React Hooks 시리즈를 계속하며 React의 Custom Hooks를 소개합니다.
사용자 지정 React Hook을 만드는 데 필요한 사항과 Hooks를 사용할 때 염두에 두어야 할 모든 규칙을 알아봅시다.

커스텀 훅이란 무엇입니까?

Custom Hook은 다른 자바스크립트 함수들 사이에 로직을 공유하고 싶을 때 우리가 직접 만드는 자바스크립트 함수입니다. 앱의 여러 부분에서 일부 코드를 재사용할 수 있습니다.

사용 시기 및 방법

다른 구성 요소 간에 논리를 공유하고 싶을 때 별도의 함수로 추출할 수 있습니다. 공식 문서에 따르면 사용자 지정 후크는 다음을 수행해야 합니다.

키워드 use로 시작

다른 후크 호출

사용자 지정 후크는 JS 함수이므로 후크 규칙도 적용됩니다. 사람들은:

루프, 조건 또는 중첩 함수 내부에서 후크를 호출하지 마십시오

.

후크는 구성 요소의 최상위 수준에 있어야 합니다

.

React 기능 구성 요소에서만 후크를 호출합니다

.

일반 함수에서 후크를 호출하지 않음

후크가 다른 후크를 호출할 수 있음

사용자 지정 후크를 만드는 방법은 무엇입니까?

JS 함수를 만들 때와 같은 방식으로 후크를 만듭니다. 코드를 재사용할 수 있도록 다른 함수로 리팩토링하는 것으로 보십시오. 생산성을 높이고 시간을 절약할 수 있습니다.

문서 제목을 업데이트하는 useEffect() 후크가 있는 다음 예를 살펴보겠습니다.

import {useState, useEffect } from 'react';

    export const Counter=()=> {
      const [count, setCount] = useState(0);
      const incrementCount = () => setCount(count + 1);
      useEffect(() => {
        document.title = `You clicked ${count} times`
      });

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={incrementCount}>ClickMe</button>
        </div>
      )
    }

우리가 원하는 것은 사용자 지정 후크를 만드는 것입니다. 이 후크는 텍스트를 받아들이고 문서 제목을 업데이트합니다. 그 방법은 다음과 같습니다.

const useDocumentTitle = (title) => {
        useEffect(() => {
          document.title = title;
        }, [title])
      }

우리의 useDocumentHook()는 이제 문자열을 받아들이고 useEffect() 내부 후크를 호출하여 제목이 변경되었을 때 지정된 제목으로 문서 제목을 업데이트합니다(여기서는 종속 항목으로 제목을 전달함).

따라서 최종 코드는 다음과 같습니다.

import { useState, useEffect } from "react";

const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

export const Counter = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
};

그게 전부입니다. 아주 간단합니다 :) 다음 블로그 게시물에서는 가장 일반적으로 사용되는 사용자 지정 후크 5개를 공유하여 개발을 더 빠르고 쉽게 만들 것입니다.

제 블로그를 읽어주셔서 감사합니다. 부담없이 접속하거나 :)