useReducer hook은 상태관리 도구이다.
useState의 대안으로 많이 사용된다.
2개 이상의 상태를 관리하기 위해서 각각을 useState로 관리하는 것 보단 useReducer를 사용하여 action별로 상태 관리하는 것이 훨씬 단순하다.
문법
1
| const [state, dispatch] = useReducer(reducer, initialState);
|
useReducer는 3개의 인자를 받을 수 있다.reducer 함수, initialState(초기상태), initFunction(초기화함수, optional)
예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| import { useReducer } from "react";
const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
return { ...state, count: state.count + 1 };
case "DECREMENT":
return { ...state, count: state.count - 1 };
case "USER_INPUT":
return { ...state, userInput: action.payload };
case "TOGGLE_COLOR":
return { ...state, color: !state.color };
default:
throw new Error();
}
};
function App() {
const [state, dispatch] = useReducer(reducer, {
count: 0,
userInput: "",
color: false,
});
return (
<main
className="App, App-header"
style={{ color: state.color ? "#000" : "#FF07FF" }}
>
<input
style={{ margin: "2rem" }}
type="text"
value={state.userInput}
onChange={(e) =>
dispatch({ type: "USER_INPUT", payload: e.target.value })
}
/>
<br />
<br />
<p style={{ margin: "2rem" }}>{state.count}</p>
<section style={{ margin: "2rem" }}>
<button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
<button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
<button onClick={() => dispatch({ type: "TOGGLE_COLOR" })}>
Color
</button>
</section>
<br />
<br />
<p style={{ margin: "2rem" }}>{state.userInput}</p>
</main>
);
}
export default App;
|
reducer 함수에는 초기값 state와 action에 따른 case별로 반환하는 상태값을 정의한다.useReducer hook을 사용하여 state(상태), dispatch(상태변경함수)를 선언한다.dispatch(상태변경함수)의 인자로 객체를 전달해주는데, type, payload 프로퍼티를 갖는 객체를 전달해준다.action 객체의 type에 따라 reducer에 정의해둔 action case에 따라 반환하는 값이 달라진다.- 위와 같이 사용하면,
useState와 useState 변경함수를 여러 개 정의하지 않고도 직관적으로 상태관리 코드를 작성할 수 있다는 장점이 있다.
댓글 공유