1. 문제 상황

다음과 같이 정규 표현식을 사용해 입력된 비밀번호 문자열이 올바른 형식인지 검사하고자 하였음

<input 
    className="modify-section-content" 
    type="text" 
    placeholder='변경할 비밀번호를 입력해주세요'
    value={password}
    onChange={(e) => handlePasswordChange(e,'(?=.*[0-9])(?=.*[a-zA-Z])(?=.*\\W)(?=\\S+$).{10,20}')}
/>

해당 정규식은 다른 곳에서 잘 작동하는 것을 그대로 따온 것이고, 형식 검사에 이용되는 함수 또한 문제가 없는 기존 코드를 그대로 이용했으나 어째서인지 검사가 정상적으로 이루어지지 않았음

2. 문제 원인

특수문자에 백슬래시가 한 번만 사용된 것이 문제였음

정확히는 기존에 다른 곳에서 사용되던 정규식은 컴포넌트에 ‘프롭스’ 로서 전달되었고, 이번에 문제가 되던 코드는 함수에 ‘파라미터’로서 전달된다는 차이가 있었음

정확히 이 둘 사이에 문자열 처리 방식이 어떻게 차이나는지는 모르겠으나, 프롭스에는 백슬래시를 이스케이프 처리하지 않아도 문제가 되지 않음

<PasswordInput setState = {setPasswordInput}
	error={passwordError} regex = '(?=.*[0-9])(?=.*[a-zA-Z])(?=.*\\W)(?=\\S+$).{10,20}'
	errorMessage='영문 대/소문자,숫자,특수문자 포함 총 10자 이상 입력해주세요' 
	setError={setPasswordError} setError2 = {setPasswordCheckError}
	opponentContent = {passwordCheckInput}
></PasswordInput>

하지만 함수에 파라미터로 전달하고 싶다면, 백슬래시를 두 번 사용해야 정상적으로 동작하는 것을 경험적으로 터득하였음

3. 문제 해결

다음과 같이 백슬래시를 이스케이프 처리하여 문제를 해결하였음

<input 
    className="modify-section-content" 
    type="text" 
    placeholder='변경할 비밀번호를 입력해주세요'
    value={password}
    onChange={(e) => handlePasswordChange(e,'(?=.*[0-9])(?=.*[a-zA-Z])(?=.*\\\\W)(?=\\\\S+$).{10,20}')}
/>