input state 변경 시 변경된 데이터를 못가져오는 경우

[배찬]

"input 1 : 사용자가 입력한 글 다루기" 강의 관련 내용입니다.

input onChange로 state를 useState의 setState로 값을 변경하고 해당 값을 console로 출력해주는데
변경전 값이 계속 출력이 되더라구요
회원가입 영역에서 이메일 중복 체크 하기 위해 email 이라는 state를 api로 전송 시 파라미터로 담아 전송하려 하는 상황인데
마지막 한글자씩 빠져서 전송되서 해결하지 못하고 있는 상황입니다.

구글로 찾아보니 setState에서 두번째 인자를 써서 콜백함수처럼 사용하는 것 같은데 제 프로젝트에선 react버전이 안맞아서그런지
안되더라구요... ( 현재 react 18버전입니다 ) 
useState에 await async 도 안되는 상황이구요

아래는 해당 내용에 관한 참고 글입니다. ( 스택오버플로우 사이트 )
https://stackoverflow.com/questions/33088482/onchange-in-react-doesnt-capture-the-last-character-of-text

아래 이미지와 같이 asdf를 입력하여도 asd까지만 console.log로 출력됩니다.
state가 비동기처리되는 경우 값을 제대로 바뀐 뒤에 api 전송하려면 어떻게 해야할지 문의드립니다.
 

[codingapple]

state변경함수는 원래 다른코드보다 늦게처리되어서 console.log가 먼저 실행될 뿐입니다
state는 제대로 변경되어있습니다

[배찬]

질문을 조금 잘못올린거 같습니다. 실제 state에는 제대로 변경이 되어있는데 onchange 이벤트로 value를 읽어올 때 
마지막에 입력한 글자를 제외하고 api로 전달되는듯 합니다.

state가 제대로 변경되어있다면 axios로 state 전달 시에도 변경되어진 state값이 전달되어야 하는데
변경전 state가 api로 전송이 되고 있는 상황입니다. 

db에 test@naver.com 이라는 샘플 데이터를 넣어두고 같은 이메일이면 중복이라고 console창에 띄우는 상황인데
onchange로 event 발생시키다보니 test@naver.com 으로 m을 마지막에 입력하였을 때는 onchange가 o까지만
인식되어 test@naver.co 로만 전송이 되며 return 값도 test@naver.co  에 대한 return 값만 넘어오고 있는 상황입니다.
제 프로젝트에서 개발자도구 - Network 탭을 확인해보니 파라미터가 위와같이 test@naver.co 로만 전송이 되고 있었습니다.

위와 같은 상황일때 onchange로 이메일 중복 처리 시 test@naver.com까지 입력하였을 때 해당 값을 
온전히 전송시키는 방법이 없을까 싶어서 다시 문의드립니다. 
(blur 하였을 때 처리할까 싶었지만 바로 변경되는게 좋을 거 같아 다른 방법이 없을까 싶어 코딩애플에 문의드리네요 ㅠㅠ)

답변달아주셨는데도 재질문 드리는 점 죄송합니다.

[codingapple]

서버로 email이라는거말고 e.currentTarget.value 보내면 됩니다 
근데 onChange 이벤트리스너안에 ajax요청 적으면 타이핑시마다 서버로 전송되어서 서버가 부담이 심해지겠군요

[배찬]

감사합니다. state를 사용하지 않고 직접 사용하면 되는 부분이였군요..
타이핑 할때마다 요청 시 서버에 부담주는 건 알고 있었지만
실시간으로 입력상태에 따른 유효성검사를 사용자에게 제공해주고 싶어서 한번 시도해보았습니다.

답변감사드립니다.

[글쓴이]

글