사용자의 입력이 끝나는 것을 감지하는 기능

회원가입시 비밀번호 확인을 어떤 방식으로 비교할까 찾아보던 중 찾게 된 기능.

 

원래 목적인 비밀번호 일치 확인은 Axios를 사용하지 않기 때문에 필요 없으나,

 

추후 검색 기능을 구현할 때 유용할 것 같아서 정리하게 되었다.

 

간단하게 정리하자면

setTimeout 내부에 유저가 입력을 멈췄을 때 실행하기 원하는 콜백함수를 넣고,

useEffect를 통해 clearTimeout을 불러서 해당 함수를 취소하는 방식

 

https://stackoverflow.com/questions/42217121/how-to-start-search-only-when-user-stops-typing

How to start search only when user stops typing?

 

단, 위와 같이 작동시키면 구성 요소가 다시 렌더링 된다는 지적이 있었다.

 

의외로 비밀번호 검사할 때 문제가 발생해서 바로 기능을 사용해보았다.

 

발생한 문제는 onChange로 두번째 비밀번호를 입력 받았을 때, 두 숫자를 비교하면 입력받은 순간 즉시 검사가 진행되기 때문에 사용자가 마지막 타이핑을 입력하기 전 값으로 비교하게 된다는 것.

 

따라서 사용자의 입력을 온전히 다 받고 나서 비밀번호를 비교해야 했다.

 

    checkPwdValid(){
        if(this.state.pwd1 !== this.state.pwd2){
            this.setState({pwdValid: 1});
        }
        else{
            this.setState({pwdValid: 2});
        }
    }

패스워드를 비교하는 함수를 작성하고

 

<input type="password" id="pwc" name='pwc' required onChange={
    function(e){
        clearTimeout(this.timeoutID);
        this.setState({pwd2: e.target.value});
        this.timeoutID = setTimeout(this.checkPwdValid.bind(this), 1000);
    }.bind(this)}/>

사용자가 비밀번호 확인에 onChange를 사용해 입력할 경우, clearTimeout(this.timeoutID);을 통해 대기중인 setTimeout을 초기화하고 새로 걸어준다. 이렇게 되면 1초 뒤에 비교 메소드를 실행하게 된다.

 

 

++

재밌는 트릭을 하나 발견했는데

어떤 값을 감시할 때마다 안내 문자 변수를 "" 빈 문자열로 초기화하고,

특정 조건에 성립하지 않는걸 if문으로 탐지해서 안내 문자를 문자 변수에 넣는 방식이다.