React Hooks (useReducer)

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Redux를 사용해봤다면 알기 쉽다.

const [state, dispatch] = useReducer(reducer, initialArg);

(state, action) => newState의 형태로 reducer를 받고,

 dispatch 메서드와 짝의 형태로 현재 state를 반환한다.

 

다수의 하윗값을 포함하는 복잡한 로직을 만들거나 다음 state가 이전 state에 의존적인 경우,

보통 useState보다 useReducer를 선호한다.

또한 useReducer는 콜백 대신 dispatch를 전달할 수 있기 때문에,

자세한 업데이트를 트리거하는 컴포넌트의 성능을 최적화할 수 있게 한다.

 

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

state는 현재 가리키고 있는 상태고, dispatch는 액션을 발생시키는 함수다.

 

사용 코드 예시

import { useReducer } from 'react';

const initialState = { value: 0 };

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

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, initialState);
    
    return (
    	<div>
        	<p>Count: {state.value}</p>
            <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
        </div>
    )
}

export default Counter;

 

 

---

참고

https://ko.reactjs.org/docs/hooks-reference.html