Ajax로 비동기 처리

구현 해놨던 회원가입시 ID중복확인 기능을

UI를 만들면서 적용하고있다

 

회원 가입 페이지에서 ID중복확인 기능을 사용할때

페이지 이동 없이 작성된 양식의 데이터는 유지 되면서

해당 데이터의 사용 가능유무를 판단 해야 한다

그럴 경우 비동기 처리라는 것을 프론트에서 구현 해야 한다

 

JS로 비동기 처리 라는것을 구현 해야 하는대

순수JS로도 구현 할수 있지만

jQuery 로 쉽게 구현 할수 있는것 같았다

jQuery 는 js 라이브러리로 Ajax로 비동기 요청을 쉽게 처리할수 있다

 

물론 React 라이브러리 에도 Axios 라는 라이브러리가 있어 비동기 요청을 쉽게 처리할수 있지만

라이브러리를 사용하기위해 라이브러리를 가져와 사용해야하는 번거로움 때문에
jQuery를 선택했다

 

 

제이쿼리 객체 $.ajax를 사용해 userController의 idCheck 메서드에 id를 요청하고

idCheck 메서드는 기존 유저의 

참,거짓을 반환한다

반환 값에 따라 ui를 변형 시키고

ui 가 활성화(사용가능 태그가 활성화)되어 있어야 회원가입 요청이 가능하도록 구현 했다

 

참고

 

https://ljh86029926.gitbook.io/coding-apple-react/4/ajax-in-react

https://velog.io/@ksung1889/React-Project11.-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-Ajax-%EC%9A%94%EC%B2%AD%EB%B0%A9%EB%B2%95-Ajax%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

React Project11. 리액트에서의 Ajax 요청방법 & Ajax는 무엇인가