개발자의 삶을 더 단순하게 만들기 위해 React는 다양한 후크를 도입했습니다. 또한 React를 사용하면 사용자 지정 후크를 만들 수 있습니다.

오늘은 React 커스텀 훅을 만들고 사용하는 방법에 대해 설명하겠습니다.

React의 Custom Hooks는 무엇입니까?

React 사용자 지정 후크는 구성 요소 논리를 재사용 가능한 함수로 추출하는 방법입니다. 자체 React 후크를 작성하기 전에 알아야 할 규칙이 하나 있습니다.

사용자 지정 후크 앞에 "사용"

React는 React 기능 구성 요소 또는 사용자 정의 후크 내부에서만 React 후크를 사용하도록 권장합니다. React는 일반 JS 함수 내에서 React 후크를 사용하지 말라고 조언합니다. 이에 대한 사고 과정은 일반 JS 함수 내에서 React 후크를 사용하는 경우 호출 스택 내부에서 "숨겨질"가능성이 있다는 것입니다. 특히 대규모 코드베이스에서 React 후크가 사용된 위치를 확인하기 위해 각각의 모든 함수를 살펴보는 것은 불가능합니다.

이 경우에도 사고 과정은 동일합니다. 사용자 지정 후크 이름에 "use"라는 접두어를 붙이면 React 후크가 사용된 위치를 확인하는 것이 더 간단할 것입니다.

따라서 사용자 지정 후크의 이름은 다음과 같아야 합니다.

useMyCustomHook()
useOnlineStatus()
useCommentFilter()

React Custom Hooks는 어떻게 작성하나요?

주어진 플레이어가 은퇴했는지 여부를 확인하기 위해 간단한 React 후크를 만들었습니다.

useRetiredStatus.js

import {useEffect, useState} from "react";

const useRetiredStatus = (player) => {

    const [isRetired, setIsRetired] = useState(null);

    useEffect(() => {
        //Assumption: The age of retirement for cricket is 40 yrs
        player?.age > 40 ? setIsRetired(true) : setIsRetired(false)
    })

    return isRetired;
}

export default useRetiredStatus;

App.js

import React, {useEffect, useState} from 'react';
import useRetiredStatus from "./useRetiredStatus";

const players = [
    {name: "Kumar Sangakkara", age: 44},
    {name: "Angelo Mathews", age: 35},
    {name: "Rohit Sharma", age: 35},
    {name: "Mahela Jayawardene", age: 45},
    {name: "David Miller ", age: 33},
]

function App() {

    const [player, setPlayer] = useState(players[2]);
    const retiredStatus = useRetiredStatus(player);

    return (
        <>
            {`Dear Cricket Fans, ${player.name} is ${retiredStatus ? 'retired' : 'still playing the game'}`}
        </>
    );
}

export default App;

산출



React Custom Hooks에는 제한이 없습니다. 일반 함수처럼 입력 및 출력 변수를 원하는 대로 변경할 수 있습니다. 이 지식을 사용하면 프로젝트의 모든 고유한 요구 사항에 대한 사용자 지정 후크를 만들 수 있습니다.

사용자 지정 후크를 만드는 대신 JS 함수를 사용할 수 없습니까?

코드에서 React 후크를 사용하지 않는 경우 JS 함수를 사용할 수 있습니다.

코드에 React 후크가 포함된 경우 코드가 React's rules of hooks에 맞도록 사용자 정의 후크를 생성해야 합니다.

결론

React 사용자 지정 후크를 사용하는 방법을 배우면 코드가 더 깨끗하고 읽기 쉬워집니다. 다음 프로젝트에서 React 사용자 지정 후크를 구현할 수 있기를 바랍니다.

기사를 읽어 주셔서 감사합니다. 오늘 귀중한 것을 배웠기를 바랍니다. 다음 시간까지 여러분 몸조심하세요.