[ React ] useState vs useReducer

useState

• state의 초깃값을 인수로 받는다.
• 길이 2인 배열을 반환한다.: state, setState(업데이트함수)

  const [state, setState] = useState(initialValue)

useReducer 로 useState 구현하기

function reducer (prevState,newState) {
    return typeof nesState === ‘function’ ? newState(prevState) : newState
}

function init (initialArg:Initializer) {
    return typeof initialArg === ‘function’ ? initialArg() : initialArg
}

function useState (initialArg) {
    return useReducer(reducer, initialArg, init)
}

useReducer

• 총 3개의 인수를 받는다. : reducer, initialState init?
• 길이 2인 배열을 반환한다 : state, dispatch(업데이트 함수)

const [state, dispatch] = useReducer(reducer,initialState,init?)

useState 로 useReducer 구현하기

const useReducer = (reducer, initialArg, init) => {
    const [state, setState] = useState(
//초기화 함수가 있으면 초깃값과 초기화 함수를 실행하고, 없으면 초깃값을 넣는다. 
    init ? init(initialArg) : initialArg
)
// 값을 업데이트 하는 dispatch를 넣어준다
const dispatch = useCallback(
    (action) => setState((prev)=>reducer(prev,action)),
[reducer] )
// 이 값을 메모이제이션한다
return useMemo(()=> [state, dispatch] , [state,dispatch] )
}