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

사용자 지정 후크는 어떻게 작동합니까?

React 사용자 지정 후크는 다른 반응 후크처럼 작동하므로 상단에서 후크를 정의해야 합니다. 하나의 사용자 지정 후크 useScroll을 만들었습니다.

export const FunctionName = () => {
    const { status } = useScroll()

그럼 위에서 자세히 알아보도록 하겠습니다. 우리는 파일을 생성할 것이고 그 안에 useScroll 함수를 생성할 것입니다. 함수 이름 앞에 use를 추가해야 하는 사용자 정의 후크를 생성하는 것을 기억하십시오. 사용자 지정 후크는 상태, 변수 및 함수를 반환합니다. 아래에서 보듯이 useScroll 함수는 상태를 반환합니다.

import { useEffect, useState } from 'react'

export const useScroll = () => {
    const [status, setstatus] = useState(false)

    return { status }
}

그래서 우리는 거의 후크를 만들었습니다. 후크가 무엇을 반환하는지 봅시다. Nav 구성 요소에서 후크를 호출하고 useScroll을 중단한 후 상태를 가져와서 useScroll 구성 요소에서 반환합니다. 다음 줄에서는 상태를 콘솔로 표시합니다.
결과가 무엇인지 맞춰보세요?

export const Nav = () => {
    const { status } = useScroll()
    console.log(status)

예, 알겠습니다. 돌아옵니다false . 상태를 참으로 만드는 방법을 알고 있습니까? 다시 useScroll 함수로 이동하여 무엇을 할 수 있는지 봅시다. onStateUpdate 함수를 생성하고 상태를 업데이트한 다음 useScroll 함수에서 반환했습니다.

export const useScroll = () => {
    const [status, setstatus] = useState(false)

    const onStateUpdate = () => {
        setstatus(!status)
    }
    return { status, onStateUpdate }
}

useScroll 후크를 호출한 Nav 구성 요소로 이동합니다. 그리고 우리는 onStateUpdate 함수 useScroll 후크를 디스트럭션하고 그것을 사용할 것입니다. 버튼을 클릭하면 상태가 false에서 true로, true에서 false로 변경됩니다.

export const Nav = () => {
    const { status , onStateUpdate } = useScroll()
    console.log(status)`
   return <button onClick={onStateUpdate}>
          Click to change it to :{status}
          </button>
}

사용자 지정 후크가 필요한 이유는 무엇입니까?
때때로 동일한 코드를 여러 번 수행해야 하므로 이를 방지하기 위해 사용자 지정 후크를 만듭니다. 상태를 업데이트할 수 있고 useRef, useEffect 등과 같은 다른 후크를 사용할 수도 있는 일반 함수처럼 작동합니다.

문안 인사

무하마드 빌랄