useReducer()
는 useState()
와 동일하게, 컴포넌트의 상태값을 제어하는 리액트 훅이다. useReducer()
를 활용하면 좀 더 다양하고, 정교한 상태 처리가 가능해진다.
// 로그인 입력 상태 확인 1. useState()
const [enteredEmail, setEnteredEmail] = useState("");
const [emailIsValid, setEmailIsValid] = useState();
const [enteredPassword, setEnteredPassword] = useState("");
const [passwordIsValid, setPasswordIsValid] = useState();
...
...
// 로그인 입력 상태 2. useReducer()
const [emailState, dispatchEmail] = useReducer(emailReducer, { value: "", isValid: null });
const [passwordState, dispatchPassword] = useReducer(passwordReducer, {
value: "",
isValid: null,
});
로그인을 입력하는 input 값에 대한 상태 확인을 진행하는 경우, useState()
를 활용하면, 입력값의 유효성 상태와 및 입력 처리에 대한 상태를 따로 따로 관리한다면, useReducer()
를 통해 유효성과 입력값의 상태를 한데 모아 업데이트하는 것이 가능해진다.
useReducer()
의 콜백함수는 action 매개변수를 받는다. action에 따라 개발자는 원하는 상태변경 함수를 세분화하여 설정할 수 있다는 점이 useState()
와 가장 큰 차이점이라고 할 수 있다.
const Login = (props) => {
const emailReducer = (state, action) => {
if (action.type === "USER_INPUT") {
return { value: action.val, isValid: action.val.includes("@") };
}
if (action.type === "INPUT_BLUR") {
return { value: state.value, isValid: state.value.includes("@") };
}
return { value: "", isValid: false };
};
const passwordReducer = (state, action) => {
if (action.type === "USER_INPUT") {
return { value: action.val, isValid: action.val.trim().length > 6 };
}
if (action.type === "INPUT_BLUR") {
return { value: state.value, isValid: state.value.trim().length > 6 };
}
return { value: "", isValid: false };
};
...
...
const emailChangeHandler = (event) => {
dispatchEmail({ type: "USER_INPUT", val: event.target.value });
};
const passwordChangeHandler = (event) => {
dispatchPassword({ type: "USER_INPUT", val: event.target.value });
};
const validateEmailHandler = () => {
dispatchEmail({ type: "INPUT_BLUR" });
};
const validatePasswordHandler = () => {
dispatchPassword({ type: "INPUT_BLUR" });
};
}
생각해보면 useState()
자체를 하나의 객체로 설정하는 방법을 통해서도 useReducer()
와 유사한 상태 변경이 구현할 수 있다. useReducer()
를 사용하는 것이 의미가 있는것인가? 어떤 경우에 useState()
를 사용하고 어떤 경우 useState()
를 사용하는 게 좋을까?
상태의 변경 뱡향이 여러개인 경우. 예를들어 무지개로 유저의 등급을 나눈다고 하고, 유저마다 “빨,주,노,초,파,남,보”의 여러 경우의 상태 함수를 만들어야 하는 경우.
현재 컴포넌트에서 관리해야할 상태값이 많으며, 해당 상태들이 서로 연관성이 있는 경우.
action을 통해 상태 변경 형태를 세분화하여 설정할 수 있다는 점과, 여러개의 상태값을 한데 모아 관리한다는 점에서, 협업 시 가독성이 좋다는 장점이 있다고 생각한다. 개발자는 action을 통해 개발 과정에서 현재 어떤 상태 업데이트가 반영되는지를 한 눈에 알 수 있기 때문이다.