공식문서에 있는 내용을 복사해서 가져왔습니다.
Reducer 관련 내용을 다른 파일에 분리하는 장점이 없으니 한 페이지에 모두 몰아서 살펴보도록합시다.
useReducer를 활용해서 redux를 사용하는 방법입니다.
일반 redux랑 사용하는 거랑 다른 점이 없습니다만
useReducer를 사용해서 해당 디스패치를 곧바로 사용할 수 있다는 점 정도가 다른 점이겠네요.
음... 좀 더 써봐야 알겠지만 react-redux에서 제공해주는 useDispatch를 사용하는 게 더 손에 익는 것 같습니다.
import React, { useReducer } from "react";
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
throw new Error();
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
</>
);
}
const App = () => {
return (
<>
<div>
<h1>Counter!</h1>
<Counter />
</div>
</>
);
};
export default App;
input 값을 감지하는 데 남용되는 useState를 useRecuder로 바꾸면 깔끔해집니다.
import React, { useReducer } from "react";
const reducer = (state, action) => {
// action.name에는 input의 name, value에는 우리가 입력한 값이 들어있습니다.
// return 한 값은 당연히 state가 되겠죠.
return {
...state,
[action.name]: action.value,
};
};
const App = () => {
const [state, dispatch] = useReducer(reducer, { id: "", password: "" });
const { id, password } = state;
const onChange = (e) => {
dispatch(e.target);
};
return (
<>
<div>
<h1>{state.value}</h1>
<input
name="id"
type="text"
value={id}
placeholder="아이디"
onChange={onChange}
></input>
<input
name="password"
type="password"
value={password}
placeholder="패스워드"
onChange={onChange}
></input>
</div>
</>
);
};
export default App;
'React, Next, Redux > 🚀 React with Hooks' 카테고리의 다른 글
useState와 useEffect로 반응형 레이아웃 구현하기 (0) | 2020.08.09 |
---|---|
useMemo (0) | 2020.07.05 |
useCallback (0) | 2020.06.24 |
react-router-dom의 Hook : useParams, useLocation, useHistory, useRouteMatch (0) | 2020.05.27 |
useCallback과 useRef를 이용한 infinite Scrolling (0) | 2020.04.19 |