[React] state로 만들 필요 없을 때

✅ 들어가며

로그인 시, 사용자가 input에 값을 입력했을 때 아이디란에는 @가 꼭 포함되도록 하고, 비밀번호의 길이는 5자 이상이 되도록 하고 싶었어요. 둘 다 제대로 입력했을 때 로그인 버튼이 활성화되도록 만들고자 했죠.

그래서 처음에 생각한 방식은 사용자가 input에 값을 입력할 때마다 onKeyUp이벤트 핸들러로 사용자가 조건에 맞게 작성했는지 확인하는거였어요.

✅ 리팩토링 전

💥 문제점
1. disabled속성을 state로 관리
: boolean인 disabled속성을 state로 선언해 따로 관리하고 있어요.

2. onKeyUp 이벤트 핸들러
: 사용자가 입력할 때마다 값을 확인해서 setState로 disabled속성을 조정해줍니다.

// Login 컴포넌트
const Login = () => {
  const [disabled, setDisabled] = useState(true);
  const handleDisabled = () => {
      let validation = userId.includes("@") && userPw.length > 4;
      return validation ? setDisabled(false) : setDisabled(true);
  };

  return (
    <form>
       <input onKeyUp={handleDisabled} />
       <button
      style={
        disabled === true
          ? { backgroundColor: "rgb(0, 149, 246, 0.3)" }
          : { backgroundColor: "rgb(0, 149, 246, 1)" }
      }
      disabled={disabled}
      >
      로그인
      </button>
    </form>
  )
}

✅ 리팩토링 후

🎉 해결
유효성 검사는 true or false로 판별한다는 것!

: 아이디나 비밀번호가 조건에 따라 제대로 쓰였는지에 대한 결과는 boolean값인 true나 false죠! 따라서, 이 조건을 바로 disabled속성에 적용시키면 돼요. 조건에 맞으면 true니까 버튼이 활성화될 것이고, 조건에 맞지 않으면 false가 돼 버튼이 비활성화 되겠죠!

// Login 컴포넌트
const Login = () => {
  const isInputValid =
  userId.includes("@") &&
  userPw.length > 4 &&;

  return (
    <form>
       <input />
       <button
        style={
          isInputValid
            ? { backgroundColor: "rgb(0, 149, 246, 1)" }
            : { backgroundColor: "rgb(0, 149, 246, 0.3)" }
        }
        disabled={!isInputValid}
       >
        로그인
       </button>
    </form>
  )
}