- useReducer
- useState의 확장판
- 다수의 하위값을 포함하는 복잡한 정적 로직을 만드는 경우
- 다음 state가 이전 state에 의존적인 경우
- Redux를 안다면 쉽게 사용 가능
import { useReducer } from 'react';
// reducer => state를 변경하는 로직이 담겨 있는 함수
// state: 이전 state 값
// action: 객체이고 필수 프로퍼티로 type을 가진다.
const reducer = (state, action) => {
if (action.type === 'PLUS') {
return {
count: state.count + 1,
};
}
return state;
};
export default function UseRecuderExample() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
const click = () => {
// dispatch => action 객체를 넣어서 실행
dispatch({ type: 'PLUS' });
};
return (
<div>
<p>You clicked {state.count} times</p>
<button onClick={click}>Click me</button>
</div>
);
}