1. ID, PW의 상태값 같이 관리하기

❌수정 전

  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');
  function saveUserId(event) {
    setIdValue(event.target.value);
  }
  function saveUserPw(event) {
    setPwValue(event.target.value);
  }

⭕수정 후

const [userInfo, setUserInfo] = useState({
    id: '',
    pw: '',
  });

  const handleInput = e => {
    const { name, value } = e.target;
    setUserInfo(prev => {
      return { ...prev, [name]: value };
    });
  };

📌 알게된 점

1. useState가 많을수록 UI가 변할때마다 랜더링되기 때문에 가급적 줄이는 것이 좋다.
2. 계산된 속성명을 이용한다면 아이디와 비밀번호의 inputValue값을 함께 관리할 수 있다.
3. 또한 set함수 안에서 prev를 매개변수 인자로 콜백함수를 쓰면 set함수가 알아서 useState의 상태값을 가져온다.
4. inputValue는 지극히 개발자만 알아보기 쉬운 변수명이다. 이름을 지을 때 어떤 동작을 하는지 알 수 있도록 지어주면 좋다. (예를 들면 idValue와 pwValue 대신 userInfo)

2. 조건에서 이미 true/false값을 나타낸다면 바로 이용하자

❌수정 전

const [btnDisable, setBtnDisable] = useState(true);
const [isActive, setIsActive] = useState(false);

const validationTest = () => {
    if (idValue.includes('@') && pwValue.length > 5) {
    if (inputValue.id.includes('@') && inputValue.pw.length > 5) {
      setIsActive(true);
      setBtnDisable(false);
    } else {
      setIsActive(false);
      setBtnDisable(true);
    }
  };
 
  <button
            disabled={btnDisable}
            onClick={goToMain}
            type="button"
            className={isActive ? 'btnActive' : btnUnactive'}
	>
    로그인
    </button>

⭕수정 후

const isValid = userInfo.id.includes('@') && userInfo.pw.length > 5;

<button
            disabled={!isValid}
            onClick={goToMain}
            type="button"
            className={isValid ? 'btnActive' : 'btnUnactive'}
>
로그인
</button>

📌 알게된 점

1. 아이디와 비밀번호 유효성 검사해주는 함수를 만들면 코드의 가독성도 좋아지고 기능이 분리화되서 좋다고 생각했다.
2. 하지만 코드 자체에서 이미 true와 false를 반환해준다면 이를 바로 이용하는 것이 좋다.
3. 함수를 위해 만들었던 useState도 2개나 지울 수 있어 불필요한 랜더링 횟수를 줄일 수가 있다.
4. 버튼의 disabled, className에서도 isValid의 true/false 값만 이용해서 표현할 수 있다.
5. 단 disable은 true 일 때가 버튼이 비활성화되므로 !(부정연산자)를 사용하여 반대로 표현해주면 된다.