설명하기 React Hooks

React Hooks는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해주는 함수입니다. React 16.8에 도입된 기능 구성 요소는 상태 관리, 수명 주기 이벤트 및 부작용과 같은 논리를 처리할 수 있습니다.

맞춤형 후크가 필요한 이유는 무엇입니까?

사용자 정의 React Hooks를 사용하면 여러 구성 요소에서 논리를 추출하고 재사용할 수 있습니다. 상태 저장 논리를 함수로 캡슐화하여 구성 요소를 깨끗하게 유지하고 중복을 줄이는 데 도움이 됩니다. 커스텀 후크는 내장 후크와 동일한 규칙을 따릅니다(예: useState, useEffect 등과 같은 다른 후크를 사용할 수 있음).

코드를 보여주세요:

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

사용자 정의 후크에 대한 규칙

최상위 수준에서만 후크를 호출하세요. 루프, 조건 또는 중첩 함수 내에서 후크를 호출하지 마세요.

React 함수에서만 후크를 호출하세요. 후크는 기능적 구성요소나 기타 사용자 정의 후크에서 사용해야 합니다.