로그인 폼 만들기 - useReducer로 Input 관리

프로젝트 전체 링크

 

로그인 폼 만들기

 

- 아이디 한글 입력 불가 처리

- 아이디 저장

- 비밀번호 표시

- Caps Lock 감지

- useReducer로 Input 관리

---

로그인을 하기 위해 ID와 비밀번호를 입력한다.

 

useState를 이용해서 loginID와 loginPassword를 이용하였다.

  const [loginID, setLoginID] = useState("");
  const [loginPassword, setLoginPassword] = useState("");

 

만약 필요한 input이 늘어난다면 관리해야 할 useState가 input의 개수만큼 늘어난다.

useReducer를 이용하면 간편하게 input을 관리할 수 있다.

---

useReducer를 import한다.

import React, { useEffect, useReducer, useState } from "react";

 

reduce 함수를 만든다. 

id를 key로 하여 value를 수정한다.

function inputReducer(state, action) {
  return {
    ...state,
    [action.id]: action.value
  };
}

 

여기서 id는 input의 id이다. 

id도 email -> loginID로 수정한다. password의 input도 id를 loginPassword로 수정한다.

<input
  type="text"
  id="loginID"
  name="email"
  placeholder="NAVER 아이디"
  className="input-id"
  onKeyDown={(e) => checkCapsLock(e)}
  value={loginID}
  onChange={(e) => getLoginID(e)}
/>

 

loginID와 loginPassword를 useReducer의 초기값으로 추가한다.

  //const [loginID, setLoginID] = useState("");
  //const [loginPassword, setLoginPassword] = useState("");
  const [state, dispatch] = useReducer(inputReducer, {loginID: "", loginPassword: ""});
  const { loginID, loginPassword } = state;

 

useState를 사용한 곳을 dispatch로 수정한다.

  const getLoginID = (event) => {
    let value = event.target.value;

    if (value === "") {
      //setLoginID(value);
      dispatch(event.target);
      return;
    }

    let length = value.length;
    if (dataRuleCheckForID(value[length - 1]) === false) return;
   
    //setLoginID(value);
    console.log(event.target);
    dispatch(event.target);

    return;
  };

 

dispatch에 event.target을 넣어주면 inputReducer에서 id에 해당하는 value를 변경해주는 것을 알 수 있다.

 

e.target이 없다면 id와 수정할 value를 dispatch로 보내주면 된다.

  const login = () => {
    console.log({ loginID, loginPassword });

    if (loginID === "") {
      alert("아이디를 입력해주세요."); return;
    }

    if (loginPassword === "") {
      alert("비밀번호를 입력해주세요."); return;
    }

    if(true /* login fail */) {
      alert("아이디 혹은 패스워드가 틀립니다.");
      //setLoginID("");
      dispatch({id: "loginID", value:""});
      //setLoginPassword("");
      dispatch({id: "loginPassword", value:""});
      
      localStorage.setItem(LS_KEY_ID, "");
      
      return;
    }

    if (true /* login success */) {
      if (saveIDFlag) localStorage.setItem(LS_KEY_ID, loginID);
    }
  };

---

diff