리액트 커스텀훅

사용자 정의 훅이란 무엇인가요?

사용자 정의 훅은 React의 기본 훅을 사용하여 재사용 가능한 상태 관리 로직을 캡슐화하는 JavaScript 함수입니다. 이는 특정 동작을 캡슐화하기 위해 useState, useEffect, useContext와 같은 기본 훅을 사용할 수 있음을 의미합니다.

왜 사용자 정의 훅을 사용하나요?

1. 재사용성: 한 번 작성한 로직을 여러 컴포넌트에서 재사용할 수 있습니다.
2. 간결성: 복잡한 로직을 사용자 정의 훅으로 추상화함으로써 컴포넌트를 더 간단하고 읽기 쉽게 만듭니다.
3. 관심사의 분리: 사용자 정의 훅을 통해 로직을 UI로부터 분리하여 코드를 더 모듈화하고 유지 보수하기 쉽게 만듭니다.

사용자 정의 훅 만들기

사용자 정의 훅을 만드는 것은 일반적인 JavaScript 함수를 만드는 것과 같지만 두 가지 주요 규칙이 있습니다:

1. 이름은 “use”로 시작해야 합니다 (예: useFetch, useFormInput).
2. 다른 훅을 호출할 수 있습니다.

기본적인 사용자 정의 훅 예제:

```

function useCustomCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);

    return { count, increment, decrement };
}

```

사용자 정의 훅 사용하기

컴포넌트에서 사용자 정의 훅을 사용하는 것은 매우 간단합니다. 다른 훅처럼 호출하기만 하면 됩니다:

```

function CounterComponent() {
    const { count, increment, decrement } = useCustomCounter();

    return (
        <div>
            <p>{count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

```