<aside> 💡 useReducer 에 대해 정리를 해보려고 한다.
</aside>
const [state, dispatch] = useReducer(reducer, initalArg, init)
useReducer는 useState의 대체 함수이다. 위의 코드에서 reducer는 (state, action) ⇒ {newState} 형태의 함수이다.(말그대로 newState만드는 reducer) **위의 reducer함수는 컴포넌트 밖에 선언을 하게 된다. **(we don't want it to be executed every re-render. we want it to be executed when reducer works!) initalArg는 state의 초기값으로, 객체형태로 오게 된다. init은 초기 state를 조금 지연해서 생성하기 위해 사용되며, 초기 state는 init에 설정되게 된다. (https://ko.reactjs.org/docs/hooks-reference.html#usereducer)
앞서 말한 것 처럼 useReducer는 useState의 대체 함수이다. 그럼 언제 useState 대신 useReducer를 써야 하는 것일까??? 보통 다수의 하윗값을 포함하는 복잡한 정적로직을 짜게 되거나, 다음 state가 이전의 state에 의존하게 되는 경우, useReducer를 사용하는게 유리하다.
또한, useReducer는 자세한 업데이트를 트리거하는 컴포넌트의 성능을 최적화 하는데, 이는 콜백 대신 dispatch를 전달 할 수 있기 때문이다.
import {useReducer} from 'react';
//need to declare reducer outside of component
const emailReducer(state, action) => {
if(action.type === "USER__INPUT"){
return { value: action.val, isValid: action.val.includes("@") }
}};
//component Login
const Login = () => {
//useReducer
const [emailState, emailDispatch] = useReducer(emailReducer, {value: '', isValid: null})
const emailChangeHandler = (event) => {
//pass action by dispatch
emailDispatch({type: "USER__INPUT", val: event.target.value})
}
return (<><Input onChange={emailChangeHandler} /></>)
}
여기에서 눈여겨 볼 점은