홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

후크란 무엇입니까? React에서 일반적으로 사용되는 두 가지 Hook에 대해 이야기해 보겠습니다.

저자：Eve Cole 업데이트 시간：2022-08-26 13:47:04
이 기사에서는 후크를 소개하고, 개발에 후크를 사용하는 것이 권장되는 이유에 대해 설명하고, React에서 가장 일반적으로 사용되는 두 가지 후크를 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

VUE3.0을 빠르게 시작하는 방법: 학습을 시작하기 전에

먼저 Hook이 무엇인지 소개하겠습니다.

Hook은 React 16.8의 새로운 기능으로, 클래스 컴포넌트에서 React의 다른 기능을 대체할 수 있습니다. 그리고 실제 업무에 많이 사용됩니다.

개발에 후크를 사용하는 것이 권장되는 이유는 무엇입니까?

후크는 기능적 구성 요소의 개발과 협력하는 데 특별히 사용됩니다. 따라서 이로 인해 발생하는 혼란을 피하기 위해 클래스 구성 요소의 일부 라이프 사이클을 대체하는 데 사용할 수 있습니다. Hooks는 개발에 편리하고 개발자가 코드를 이해하기 더 쉽습니다.

자세한 내용은 React 공식 웹사이트(

https://react.docschina.org/docs/hooks-intro)를 참조하세요. html#motivation

useState

코드에서:

React.useState(0)는 클래스 구성 요소의 this와 동일합니다.

state에 속성 값 변수를 추가하는 것은 클래스 구성 요소의 this.state와 동일합니다. setVariable 변수의 값을

사용할 수 있습니다

.

클래스 구성 요소의 this.setState와 동일할 수 있는 변수 값을 수정합니다.

import React, (useState) from 'react'
기본 함수 내보내기 useState_Demo() {
    const [variable, setVariable] = useState(0);//구조 분해 할당을 통해 변수와 setVariable을 얻습니다.
    함수 변경변수(){
        setVariable((variable) => 변수 +1) //setVariable의 콜백에 전달된 매개변수는 변수입니다.
    }
    렌더링(
        <div> 
            <button onclick = {change}>변수+1을 만들려면 나를 클릭하세요</button>
        </div>
    )
}

useEffect

코드에서:

다음 코드에서 볼 수 있듯이 useEffect의 사용은

'react'에서 import React, (useState, useEffect)
클래스 구성 요소의 componentDidMoun, componentDidUpdate 및 componentWillUnmount의 사용을 대체합니다.
기본 함수 내보내기 useState_Demo() {
   const [variable, setVariable] = useState(0);//구조 분해 할당을 통해 변수와 setVariable을 얻습니다.
    
    useEffect(() => {
        //이 반환은 구성 요소가 모니터링하는 데이터가 변경되거나 제거될 때 호출됩니다. 제거할 때 호출하는 것은 구성 요소WillUnmount 후크 반환() => {
            console.log('구성요소가 제거되었습니다.')
        }
    }, [변수])//두 번째 매개변수가 [변수]로 전달됩니다. 이는 변수의 업데이트 변경이 감지되었음을 의미합니다. 변수가 변경되면 useEffect 콜백이 다시 실행됩니다. //두 번째 매개변수가 전달됩니다. [] 즉, 감지는 useEffect 콜백을 한 번만 실행합니다. 이는 componentDidMount 후크와 동일합니다. //두 번째 매개변수는 구성요소에 상태가 변경되는 동안에는 useEffect 콜백이 실행됩니다. componentDidUpdate 후크 함수인changeVariable(){과 동일합니다.
        setVariable((variable) => 변수 +1) //setVariable의 콜백에 전달된 매개변수는 변수입니다.
    }
    렌더링(
        <div> 
            <button onclick = {change}>변수+1을 만들려면 나를 클릭하세요</button>
        </div>
    )
}

후크 사용 시 주의 사항

: 1. 구성 요소 함수의 가장 바깥쪽 레이어에서만 후크를 사용하세요. 루프, 조건 또는 중첩 함수에서 후크를 호출하지 마세요

(useEffect) from 'react'
.
기본 함수 내보내기 useState_Demo() {
   //올바른 useEffect(() => {})입니다.
    
   //오류 1, 조건부 판단 사용 if(true) {
        useEffect(() => {})
   }
   //오류 2, 루프 사용 while(true) {
        useEffect(() => {})
   }
  //오류 3, 중첩된 useEffect(() => { 사용 중)
      useEffect(() => {})
  })
}
2. Hook 
import React, 'react'의 (useState, useEffect)는

컴포넌트의 함수 외부에서 사용할 수 없습니다.

//오류 1, useState가 구성요소 함수 외부에서 사용되었습니다.
const [변수, setVariable] = useState(0);
//오류 2, useEffect가 컴포넌트 함수 외부에서 사용되었습니다.
useEffect(() => {})
기본 함수 내보내기 useState_Demo() {
   //컴포넌트에서 사용하는 것이 맞습니다. function const [variable, setVariable] = useState(0);
}

3. 위의 오류를 방지하려면 eslint-plugin-react-hooks ESLint 플러그인을 설치하여 코드의 오류를 확인할 수 있습니다.

사용자 정의

후크는 간의 논리 공유를 용이하게 하는 기능입니다. 실제로 재사용되는 구성 요소입니다. 함수가 캡슐화되어 있으며 사용자 정의 후크도 반응과 함께 제공되는 후크를 호출합니다. 이름은 use

// Custom Hook
로 시작해야 합니다.
함수 useHook(initState) {
  const [변수, setVariable] = useState(initState)
  반환 변수;
}
//사용자 정의 후크 사용
기본 함수 내보내기 useState_Demo() {
    const 변수상태 = useHook(0)
}

여러 구성 요소에서 동일한 Hook을 사용하여 상태를 공유할지 궁금할 것입니다.

대답은: 아니오입니다. React와 함께 제공되는 후크에 대한 각 호출은 독립적이고 서로 영향을 미치지 않기 때문에 사용자 정의 후크는 독립적이며 여러 번 호출해도 서로 영향을 미치지 않습니다.
관련 기사