기존의 useState를 useReducer로 변경

기존의 로그인 형식

type UserInfoState = {
  id: string;
  passWord: string;
};

type UserInfoAction =
  | {
      type: "setId";
      payload: string;
    }
  | {
      type: "setPassWord";
      payload: string;
    };

기존에는 useState hook을 활용해서 로그인이나 회원가입할 때 입력 된 정보를 관리했었는데 실무에서 배운 useReducer방식에 대해서 작성해 볼까 합니다.

 

먼저 reducer함수를 생성해줘야 합니다.

 

또한 타입스크립트를 이용했기 때문에 state와 action의 type을 지정해줘야 합니다.

function reducer(state: UserInfoState, action: UserInfoAction) {
  switch (action.type) {
    case "setId":
      return {
        ...state,
        id: action.payload,
      };
    case "setPassWord":
      return {
        ...state,
        passWord: action.payload,
      };
    default:
      return state;
  }
}

type까지 지정해주었으면 모든 준비는 끝났습니다.

 

function App() {
  const [userInfo, dispatch] = useReducer(reducer, { id: "", passWord: "" });
  return (
    <>
      아이디 :{" "}
      <input
        type="text"
        onChange={(e) => dispatch({ type: "setId", payload: e.target.value })}
      />
      <br />
      비밀번호 :
      <input
        type="password"
        onChange={(e) =>
          dispatch({ type: "setPassWord", payload: e.target.value })
        }
      />
      <br />
      <button onClick={() => console.log(userInfo)}>로그인</button>
    </>
  );
}

useReducer hook을 통해 reducer함수와 state의 초기값을 지정해 줍니다.

이후 id input에 onChange event가 발생하면 dispatch 함수를 이용해서 지정해 둔 type을 통해서 payload로 해당 state의 값을 업데이트해줍니다.

 

기존의 state와 useReducer의 차이는 엄청난 것 같습니다. 일일이 관리하였던 state와 다르게 한꺼번에 유저의 정보를 관리할 수 있기 때문에 훨씬 간편한 것 같습니다.

 

useReducer를 이용한 유저 정보 관리