두번 클릭해야 동작하는 말 안 듣는 버튼 해결하기

문제 발생

코드를 모두 작성하고 테스트를 해봤는데.. 버튼을 클릭해도 Network 창에 변화가 없다.
오류가 나든 일단 Network에 request 요청한 부분은 찍혀야 하는데 말이다.

그렇다면,
request를 요청하는 axios문이 아예 실행되지 않았다고 볼 수 있다.
그렇다면 왜 실행되지 않았나?

const usernameInput = e.target.username.value;
const passwordInput = e.target.password.value;

setUsername(usernameInput);
setPassword(passwordInput);

if (username !== '' && password !== '') {
	setIsLoading(true);
	axios
	.post(`${process.env.REACT_APP_API_URL}/user/login`, {
	username,
	password,
	})
  ...
}

입력한 값이 usernameInput, passwordInput 변수에 담기고 useState 변수인 username, password 에 set으로 넣어 주는데 왜 안되었을까?

그 이유는 setUsername, setPassword 부분이 비동기적으로 이루어지기 때문이다.
값이 반영되기 전에 if문으로 진행되어 버렸으므로 if 조건이 만족이 되지 않았고 코드는 그냥 지나가 버린 것이다.

두번째 클릭 했을 때는 username, password 변수에 값이 들어있는 상태기 때문에 if문이 정상적으로 실행 될 수 있었던 것이다.

---

해결하기

input 내용이 바뀔 때 마다 실시간으로 수정이 된다면 해결되는 부분이다.
각 input태그에 onChange={(e) => setUsername(e.target.value)}와 같은 속성을 추가하면서 해결했다.
input내용이 바뀔 때마다 실시간으로 username과 password값은 반영이 되므로 제출 두번 클릭해야 하는 문제는 사라진다.

//const usernameInput = e.target.username.value;
//const passwordInput = e.target.password.value;

//setUsername(usernameInput);
//setPassword(passwordInput);
// 위 코드들은 onChange 로 실시간 반영되므로 삭제된다.

if (username !== '' && password !== '') {
	setIsLoading(true);
	axios
	.post(`${process.env.REACT_APP_API_URL}/user/login`, {
	username,
	password,
	})
  ...
}

'두번 클릭해야 동작하는 말 안 듣는 버튼' 이라고 제목에 썼지만
상식적으로 버튼이 말을 안 들을 일은 없다😂

내가 말 안 듣는 코드를 작성했을 뿐..