기술나눔

【반응】훅을 사용자 정의하는 방법

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

React에서 사용자 정의 Hooks를 사용하면 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있습니다. 사용자 정의 후크는 기본적으로 일반 JavaScript 함수이지만 다음 두 가지 규칙을 따라야 합니다.

  1. 명명 규칙: 커스텀 Hook의 이름은 다음으로 끝나야 합니다.use 시작. 이 규칙은 귀하와 다른 개발자가 어떤 기능이 Hook인지 더 쉽게 식별하는 데 도움이 됩니다.
  2. 함수 구성요소 내부에서 호출됨 : 사용자 정의 Hook은 함수 구성 요소나 다른 사용자 정의 Hook 내부에서만 호출할 수 있습니다. 클래스 구성 요소에서 호출하지 마세요.

사용자 정의 Hook을 생성하는 방법에 대한 기본 단계는 다음과 같습니다.

1단계: 정의use처음에 기능

먼저 함수를 만들고 이름 앞에 다음을 추가해야 합니다.use

function useCustomHook() {
   
  // 你的Hook逻辑
}
  • 1
  • 2
  • 3
  • 4

2단계: 상태 또는 기타 Hooks 추가

커스텀 Hook 내부에서는 다음과 같은 React의 내장 Hook을 사용할 수 있습니다.useStateuseEffect기다리다.

<