[javascript] React Hooks 오류 : 후크는 함수 구성 요소의 본문 내에서만 호출 할 수 있습니다.

컴포넌트 파일에서 React의 기본 후크를 가져온 다음 사용자 지정 후크에 전달하여이 문제를 해결할 수있었습니다. 어떤 이유로 사용자 지정 후크 파일에서 React 후크 (예 : useState)를 가져올 때만 오류가 발생합니다.

내 구성 요소 파일에서 useState를 가져옵니다.

import React, {useState} from 'react'; // import useState

import {useCustomHook} from '../hooks/custom-hook'; // import custom hook

const initialState = {items: []};
export default function MyComponent(props) {
    const [state, actions] = useCustomHook(initialState, {useState});
    ...
}

그런 다음 내 후크 파일에서 :

// do not import useState here

export function useCustomHook(initialValue, {useState}) {
    const [state, setState] = useState(initialValue || {items: []});

    const actions = {
        add: (item) => setState(currentState => {
            const newItems = currentState.items.concat([item]);
            return {
                ...currentState,
                items: newItems,
            };
        }),
    };

    return [state, actions];
}

이 방법은 기본 후크를 제공하기 위해 React의 라이브러리를 모의 할 필요가 없기 때문에 후크의 테스트 가능성을 향상 시켰습니다. 대신 모의 useState후크를 사용자 지정 후크의 함수에 바로 전달할 수 있습니다 . 사용자 지정 후크가 이제 React 라이브러리와 결합되지 않아보다 자연스러운 기능 프로그래밍 및 테스트를 허용하므로 코드 품질이 향상된다고 생각합니다.