반응 후크 설명

후크는 React 16.8에 새로 추가되었습니다. 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 당신은 luray에서 그들을 중요하게 할 수 있고 수업에서 그들을 정의할 수 있고 당신은 갈 수 있습니다. 후크는 이전 버전과 호환됩니다. 즉, 주요 변경 사항이 포함되어 있지 않습니다. 또한 React 개념에 대한 지식을 대체하지 않습니다.

React 후크가 따르는 몇 가지 규칙

Hooks는 자바스크립트 함수와 비슷하지만 사용할 때 이 두 가지 규칙을 따라야 합니다. 후크 규칙은 구성 요소의 모든 상태 저장 논리가 해당 소스 코드에 표시되도록 합니다. 이러한 규칙은 다음과 같습니다.

최상위 수준의 Hooks만 호출
루프, 조건 또는 중첩 함수 내부에서 Hooks를 호출하지 마십시오. 후크는 항상 React 함수의 최상위 수준에서 사용해야 합니다. 이 규칙은 구성 요소가 렌더링될 때마다 Hook이 동일한 순서로 호출되도록 합니다.

React 함수에서만 Hooks 호출
일반 JavaScript 함수에서는 후크를 호출할 수 없습니다. 대신 React 함수 구성 요소에서 Hooks를 호출할 수 있습니다. 후크는 사용자 지정 후크에서 호출할 수도 있습니다.

🔥 사용상태 :
가장 중요하고 자주 사용되는 후크입니다. 반응성 데이터를 처리하는 이 후크의 목적은 애플리케이션에서 변경되는 모든 데이터를 상태라고 하며 데이터가 변경되면 React가 UI를 다시 렌더링합니다.

const [count, setCount] = React.useState(0);

🔥 사용효과 :
이를 통해 단일 함수 API 내에서 모든 수명 주기 후크를 구현할 수 있습니다.

// this will run when the component mounts and anytime the stateful data changes
React.useEffect(() => {
    alert('Hey, Nads here!');
});

// this will run, when the component is first initialized
React.useEffect(() => {
    alert('Hey, Nads here!');
}, []);

// this will run only when count state changes
React.useEffect(() => {
    fetch('nads').then(() => setLoaded(true));
}, [count]);

// this will run when the component is destroyed or before the component is removed from UI.
React.useEffect(() => {
    alert('Hey, Nads here');

    return () => alert('Goodbye Component');
});

🔥 useContext :
이 후크를 사용하면 소품을 통과하지 않고 구성 요소 트리 내에서 데이터를 공유할 수 있는 메커니즘인 React의 Context API로 작업할 수 있습니다. 기본적으로 소품 드릴링을 제거합니다.

const ans = {
    right: '✅',
    wrong: '❌'
}

const AnsContext = createContext(ans);

function Exam(props) {
    return (
        // Any child component inside this component can access the value which is sent.
        <AnsContext.Provider value={ans.right}>
            <RightAns />
        </AnsContext.Provider>
    )
}

function RightAns() {
    // it consumes value from the nearest parent provider.
    const ans = React.useContext(AnsContext);
    return <p>{ans}</p>
    // previously we were required to wrap up inside the AnsContext.Consumer
    // but this useContext hook, get rids that.
}

🔥 useRef :
이 후크를 사용하면 변경 가능한 개체를 만들 수 있습니다. useState hook과 같이 값이 변경된 상태를 유지할 때 사용하지만 차이점은 값이 변경될 때 다시 렌더링하지 않는다는 것입니다.

일반적인 사용 사례는 DOM에서 HTML 요소를 가져오는 것입니다.

function App() {
    const myBtn = React.useRef(null);
    const handleBtn = () => myBtn.current.click();
    return (
        <button ref={myBtn} onChange={handleBtn} >
        </button>
    )
}

휴, 빠르다! 이해가 되지 않거나 더 자세히 알고 싶은 경우 React State Hook 문서를 읽을 수 있습니다.