React ) Hooks : useReducer 사용하기

Hooks : useReducer 

---

useReducer는 리액트에서 reducer를 사용하게 해주는 Hook 입니다. 현재 상태, 업데이트에 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수입니다. 

• action

상태를 변화시키기 위해 필요한 정보를 담은 액션은 다음과 같이 형태로 이루어져 있습니다.

뒷장에서 배울 리덕스에서는 액션안에 이 type 객체가 반드시 있어야 한다고 합니다.

{
	type: 'ACTIONTYPENAME',
    ...
}

---

카운터 구현

• view

첫화면은 다음과 같습니다. 아래 +1 버튼을 누르면 current value 값이 1 증가하고, -1 버튼을 누르면 1 감소합니다. 

• source code

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch(action.type){
        case 'INCREMENT':
            return { value: state.value +1 };
        case 'DECREMENT':
            return { value: state.value -1 };
        default:
            return state;
    }
}

const Counter = () => {
    const [state,dispatch] = useReducer(reducer, { value: 0 });

    return(
        <div>
            <h1>Counter›</h1>
            <p>current value: {state.value}</p>
            <button onClick={() => dispatch({type: 'INCREMENT'})}>+1</button>
            <button onClick={() => dispatch({type: 'DECREMENT'})}>-1</button>
        </div>
    );
}

export default Counter;

---

useReducer

useReducer의 첫번째 파라미터에 reducer 함수를 넣고, 두번재 파라미터에 리듀서의 기본값을 넣어줍니다.

useReducer Hook에서 state 값과 dispatch 함수를 받아옵니다.

• state : 현재 상태
• dispatch : 액션을 발생시키는 함수로, dispatch(action)으로 리듀서 함수를 호출하여 적절한 action 값에 따른 작업을 수행하게 합니다.

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

+1, -1 버튼을 각각 클릭하면 onClick 이벤트가 트리거되어 dispatch 함수를 호출합니다. 이때, action 값으로 { type: '..' }을 dispatch 함수에 전달합니다. 

<button onClick={() => dispatch({type: 'INCREMENT'})}>+1</button>
<button onClick={() => dispatch({type: 'DECREMENT'})}>-1</button>

dispatch 함수는 reducer 함수를 호출하고, reducer 함수에서는 swtich 문을 통해 전달 받은 action의 type에 따라 state에 작업을 수행합니다.

function reducer(state, action) {
    switch(action.type){
        case 'INCREMENT':
            return { value: state.value +1 };
        case 'DECREMENT':
            return { value: state.value -1 };
        default:
            return state;
    }
}

---

References

• 리액트를 다루는 기술 (김민준)