react - useState - setState 비동기 처리 과정

로그인

마크업은 대충 이렇다. 각 인풋창에서 밸류값이 측정되면 받아와서 조건에 맞을경우 로그인 버튼을 활성화 하는 문제였다.

let [isIdValue, setIdValue] = useState();
function saveUserId(e) {
isIdValue = e.target.value;
userDataValidation();
}

처음엔 이렇게 넣었다. 하지만 안됐다. 왜냐면 useState가 쓰여진 경우 isIdValue는 직접 값을 넣어봤자 인식 못하고 setIdValue로만 할당이 되기 때문이다.

그래서

let [isDisabled, setDisabled] = useState('disabled');
let [isIdValue, setIdValue] = useState('');
let [isPwValue, setPwValue] = useState('');

function saveUserId(e) {
setIdValue(function () {
isIdValue = e.target.value;
});
setIdValue(e.target.value);
return isIdValue;
}

function saveUserPw(e) {
setPwValue(function () {
isPwValue = e.target.value;
});
setPwValue(e.target.value);
return isPwValue;
}

// isIdValue.indexOf(@) > -1 && isPwValue.length > 5
// ? setDisabled()
// : setDisabled('disabled');

setState의 인자값을 함수로 주면 비동기가 동기처리 된다고 하더라
근데 문제는 저 주석처리되어있는 저 부분이 자꾸 에러가 뜨더라
렌더링 될 때마다 저게 돌아가야하는데 안되길래

useEffect(
function () {
isIdValue.indexOf(@) > -1 && isPwValue.length > 5
? setDisabled()
: setDisabled('disabled');
},
[isIdValue, isPwValue]
);

useEffect를 써서 isIdValue, isPwValue 값들이 바뀔때마다 렌더링 시켜버렸다.

이렇ㄱ ㅔ완료