useReducer

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() 를 통해 유효성과 입력값의 상태를 한데 모아 업데이트하는 것이 가능해진다.

action

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() vs useReducer()

생각해보면 useState() 자체를 하나의 객체로 설정하는 방법을 통해서도 useReducer() 와 유사한 상태 변경이 구현할 수 있다. useReducer() 를 사용하는 것이 의미가 있는것인가? 어떤 경우에 useState() 를 사용하고 어떤 경우 useState() 를 사용하는 게 좋을까?

useState()

• 상태의 변경이 단순히 0(이전)과 1(새로운 것)의 이루어지는 경우.
• 현재 컴포넌트에서 관리해야할 상태값이 많지 않고, 해당 상태들이 모두 상호 독립적인 경우.

useReducer()

• 상태의 변경 뱡향이 여러개인 경우. 예를들어 무지개로 유저의 등급을 나눈다고 하고, 유저마다 “빨,주,노,초,파,남,보”의 여러 경우의 상태 함수를 만들어야 하는 경우.

• 현재 컴포넌트에서 관리해야할 상태값이 많으며, 해당 상태들이 서로 연관성이 있는 경우.

결론

action을 통해 상태 변경 형태를 세분화하여 설정할 수 있다는 점과, 여러개의 상태값을 한데 모아 관리한다는 점에서, 협업 시 가독성이 좋다는 장점이 있다고 생각한다. 개발자는 action을 통해 개발 과정에서 현재 어떤 상태 업데이트가 반영되는지를 한 눈에 알 수 있기 때문이다.