Hook

Hooks

React 함수형 컴포넌트에서 상태(state)와 생명주기를 사용할 수 있게 해주는 기능

 

useState Hook

상태(state)를 함수형 컴포넌트에서 관리할 수 있게 해준다.

일반적으로 배열의 형태로 반환되며, 첫번째 값이 상태 값, 두번째 값이 상태값을 업데이트 해주는 함수를 의미한다.

import React, {useState} from 'react';

function Example() {
    const [num(변수), setNum(함수)] = useState(1);

    const Click = () => {
        setNum(num+1);
    };

    return (
        <p>값 : {num}</p>
        <buttonn onClick={Click}>증가</button>
    );
}

 

useEffect Hook

생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)와 비슷한 역할을 한다.

특정 작업, 상태 변화를 진행함에 있어 부작용(side effect)을 처리하는 데 사용한다.

side effect는 데이터 가져오기, 수동적인 DOM 조작 등과 같이 다른 컴포넌트에 영향을 줄 수 있는 작업들을 의미한다.

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

function Example() {
    const[num, setNum] = useState(1);

    useEffect(() => {
        document.title = '값: ${num}'; // <- side effect

        return () => { // <- cleanup
            document.title = 'React App'
        };
    }, [num]);

    // 첫번째 인자는 side effect를 수행하는 함수
    // 첫번째 인자는 함수 내부에서 문서 제목을 변경한다.
    // 두번째 인자는 dependency array
    // 두번째 인자는 배열이 변할 때, 첫번째로 전달된 side effect 함수가 실행된다.

    // cleanup function (반환하는 함수)
    // 컴포넌트 unmount시 dependency가 변경되기 전에 여기서 필요한 작업을 할 수 있다.

    return (
        <p>값 : {num}</p>
        <buttonn onClick={() => setNum(counnt+1)}>증가</button>
    );
}

 

useContext Hook

Context API를 함수형 컴포넌트에서 사용할 수 있도록 도와준다.

전역적인 상태를 관리하거나 깊은 중첩에 걸친 컴포넌트들에게 props를 전달하는 것을 피하기 위해 사용된다.

useContext Hook을 사용하면 context 객체를 인자로 받아 해당 context의 값을 반환한다.

이 값은 context Provider 컴포넌트에서 제공되며, Provider가 없다면 context 객체 생성 시 전달된 기본값이 된다.

import React, {useContext} from 'react';

const MyContext = React.createContext();

function MyComponent() {
    const value = useContext(MyContext);

    return <p>{value}</p>
}

function Example() {
    return (
        <MyContext.Provider value= "Hello">
            <MyComponent/>
        </MyContext.Provider>
    )
}

 

Provider

Context API에서 중요한 역할을 하는 컴포넌트
Provider는 context를 새엉할 때 반환된느 컴포넌트로, 그 자식 컴포넌트들에게 context 값을 제공한다.

 

useReducer Hook

복잡한 상태 로직을 다루기  위해 사용된다.

useState보다 더 강력한 방식으로 작동하며 액션(action)과 리듀서(reducer) 패턴을 사용한다.

현재 상태와 함수를 쌍으로 제공한다.

함수는 action을 인자로 받아 reducer한테 전달하고, reducer는 현재 상태와 action을 기반으로 새로운 상태를 생성한다.

import React, {useReducer} from 'react';
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return {count:state.count};
        case 'decrement':
            return {count:state.count};
        default:
            return {count:state.count};
    }
}

function Example() {
    const [state, dispatch] = useReducer(reducer, {count: 0});

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