반응형
useState와 useReducer의 차이는 setState 대신 newState를 만드는 함수를 직접 정의할 수 있다는 것이다.
const [count,setCount] = useReducer(countReducer,0)
function countReducer(prevState,newState){
return newState
}
const [count,setCount] = useState(0)
// 똑같이 동작한다
setCount(count+1)
어 그럼 지금까지 redux 만들면서 작업했던 switch - action 구문은 뭐에요?
-> 이전 상태(+타입)에 따라 다음 상태를 만드는 작업을 setState가 아닌 reducer함수에서 구현했을 뿐.
-> 리턴하는 것은 동일하게 다음 state다
reducer는 좁아지는 파이프처럼 하나의 케이스로 축소해줌.
위를 아래와 같이 바꾸면 dispatch처럼 된다.
function countReducer(state, action) {
switch (action.type) {
case 'INCREMENT': {
return {count: state.count + action.step}
}
case 'DECREMENT': {
return {count: state.count - action.step}
}
default:
throw new Error(`Unsupported action type : ${action.type}`)
}
}
function Counter({initialCount = 0, step = 1}) {
// 🐨 replace React.useState with React.useReducer.
// 💰 React.useReducer(countReducer, initialCount)
const [{count}, dispatch] = React.useReducer(countReducer, {count: 0})
// 💰 you can write the countReducer function so you don't have to make any
// changes to the next two lines of code! Remember:
// The 1st argument is called "state" - the current value of count
// The 2nd argument is called "newState" - the value passed to setCount
const increment = () => dispatch({type: 'INCREMENT', step})
return <button onClick={increment}>{count}</button>
}
반응형
'FrontEnd' 카테고리의 다른 글
[Epic React] useLayoutEffect, useImperativeHandle, forwardRef (0) | 2021.12.04 |
---|---|
useEffect는 라이프사이클 훅이 아니다. (0) | 2021.12.04 |
NestJs 관련 학습 컨텐츠 소개 (0) | 2021.12.03 |
[Epic React] form 사용하기 (0) | 2021.12.01 |
[Epic React] React.createElement, jsx와 바벨 (0) | 2021.11.30 |