10가지 반응 후크 설명 ✨

이 블로그는 원래 게시된 위치: My Blog

React Hooks(React < 16.8) 이전에는 개발자가 특정 React 기능을 활용하기 위해 구성 요소를 작성해야 했습니다class. 그러나 이제 React Hooks는 구성 요소 계층 구조를 변경하지 않고 상태 저장 논리를 사용할 수 있기 때문에 구성 요소를 빌드하는 보다 인체 공학적인 방법을 제공합니다.

총 10개의 훅이 있습니다 🔥

🚀 사용상태 :

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

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

🚀 useEffect :

이를 통해 단일 함수 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's Context API 로 작업할 수 있습니다. 이 메커니즘 자체는 소품을 거치지 않고 구성 요소 트리 내에서 데이터를 공유할 수 있는 메커니즘입니다. 기본적으로 제거합니다prop-drilling.

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>
    )
}

🚀 useReducer :

setState와 매우 유사하며 Redux Pattern를 사용하여 상태를 관리하는 다른 방법입니다. 상태를 직접 업데이트하는 대신 dispatch 함수로 이동하는 reducer 작업을 수행하고 이 함수는 다음 상태를 계산하는 방법을 알아냅니다.


그림. useReducer 아키텍처

function reducer(state, dispatch) {
    switch(action.type) {
        case 'increment':
            return state+1;
        case 'decrement':
            return state-1;
        default:
            throw new Error();
    }
}

function useReducer() {
    // state is the state we want to show in the UI.
    const [state, dispatch] = React.useReducer(reducer, 0);

    return (
        <>
        Count : {state}
        <button onClick={() => dispatch({type:'decrement'})}>-</button>
        <button onClick={() => dispatch({type:'increment'})}>+</button>
        </>
    )
}

🚀 사용메모 :

이 후크는 계산 비용을 최적화하거나 성능을 향상시키는 데 도움이 됩니다. 값비싼 계산이 필요할 때 주로 사용됩니다.

function useMemo() {

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

    const expensiveCount = useMemo(() => {
        return count**2;
    }, [count]) // recompute when count changes.
}

반환된 값을 메모하는 데 효과적이지만 다른 CSSNamespaceRule 에서는 전체 함수를 메모하고 싶을 때 이 후크를 사용할 수 있습니다 ↓

🚀 useCallback :

function useCallbackDemo() {
    const [count, setCount] = useState(60);

    const showCount = React.useCallback(() => {
        alert(`Count ${count}`);
    }, [count])

    return <> <SomeChild handler = {showCount} /> </>
}

🚀 useImperativeHandle :

이 후크는 노출된 참조를 수정하는 데 사용되며 거의 사용되지 않습니다.

function useImperativeHandleDemo(props, ref) {

    const myBtn = useRef(null);

    React.useImperativeHandle(ref, () => ({
        click: () => {
            console.log('clicking button!');
            myBtn.current.click();
        }
    }));
}

🚀 레이아웃 효과 사용:

한 가지 차이점을 제외하면 useEffect 후크와 동일하게 작동합니다. 콜백은 구성 요소를 렌더링한 후 실제 업데이트가 화면에 그려지기 전에 실행됩니다.

⚠️ : 콜백이 완료될 때까지 시각적 업데이트를 차단합니다.

function useLayoutEffectDemo() {

    const myBtn = React.useRef(null);

    React.useLayoutEffect(() => {
        const rect = myBtn.current.getBoundingClientRect();
        // scroll position before the dom is visually updated
        console.log(rect.height);
    })
}

🚀 디버그 값 사용:

이 후크는 별 의미가 없지만 디버깅에 유용한 React Dev Tools 에서 사용자 지정 레이블을 정의할 수 있습니다. 동일한 논리를 사용하는 구성 요소가 n개 있다고 가정하면 자체 기능을 별도로 정의하고 다른 구성 요소에서 사용할 수 있지만 여기서 핵심은 디버깅할 수 있다는 것입니다.

function useDisplayName() {
    const [displayName, setDisplayName] = React.useState();

    React.useEffect(() => {
        const data = fetchFromDatabase(props.userId);
        setDisplayName(data.displayName);
    }, []);

    React.useDebugValue(displayName ?? 'loading...');
    return displayName;
}

반환 값은 다른 구성 요소 또는 이와 같은 응용 프로그램의 다른 위치에서 사용할 수 있습니다 👇🏽

function App() {
    const displayName = useDisplayName();

    return <button>{displayName}</button>;
}

참조 - Fireship's Youtube Video - React Hooks

연결하시겠습니까?