[React] 비밀번호 재설정 페이지

이번에 새로 도전해본 웹 개발.. 비밀번호 재설정 페이지 구현하는 역할을 받았는데 이전에 앱 개발할 때보다 코드가 훨씬 깔끔해진 것 같아 기록해보려고 한다.

우선 'useState' 훅을 사용해서 새로운 비밀번호를 관리하는 상태 변수를 선언하고, 상태 변수를 업데이트하는 함수를 생성했다. (비밀번호 재확인도 동일)

const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');

'newPassword'와 'confirmPassword'는 비밀번호를 저장하는 상태 변수이고, 'setNewPassword'와 'setConfirmPassword'는 이 상태를 업데이트하는 함수이다.

* 'useState' 훅은 함수형 컴포넌트에서 상태를 사용할 수 있게 해주는 중요한 React 훅 중 하나이다. 함수형 컴포넌트에서도 상태를 선언하고 관리할 수 있도록 해 주어, 클래스형 컴포넌트와 비슷한 기능을 제공한다. *

onChange={(e) => handlePasswordInput(e, 'newPassword')}

사용자가 입력한 값이 변경될 때마다 함수를 호출하도록 했고, 변경된 값과 어떤 값이 변경 되었는지 알기 위해 'newPassword'와 'confirmPassword'를 보내주었다.

const handlePasswordInput = (e, whatToChange) => {
    if (whatToChange === 'newPassword') {
      setNewPassword(e.target.value);
    } else if (whatToChange === 'confirmPassword') {
      setConfirmPassword(e.target.value);
    }
  };

함수에선 이렇게 변경된 값의 이름을 확인하여 각각의 상태 업데이트 함수에 넣어주도록 했다.

그리고 비밀번호를 입력할 때 에러 메세지를 남기기 위해 'useEffect' 훅을 사용하여 컴포넌트 내에서 비동기적인 부수 효과를 다루도록 했다. 새로운 비밀번호(newPassword)와 비밀번호 재확인(confirmPassword)의 변화를 감지하고, 해당 상태에 따라 비밀번호 정책을 검증하고 입력한 두 비밀번호가 일치하는지 판단하는 로직을 구현했다.

useEffect(() => {
    if (!passReg.test(newPassword) && newPassword.length > 0) {
      const missingPatterns = validatePasswordPolicy(newPassword);
      setErrorMessage(`${missingPatterns}를 사용해주세요.`);
    } else if (!isMatched && confirmPassword.length > 0) {
      setErrorMessage('비밀번호가 일치하지 않습니다.');
    } else {
      setErrorMessage('');
    }

    // 비밀번호 일치 확인
    setIsMatched(newPassword === confirmPassword);
  });

const [isMatched, setIsMatched] = useState(false);

validatePasswordPolicy 함수를 사용해서 사용자가 입력한 비밀번호 정책을 검증하고, 만족하지 않으면 missingPatterns 변수에 해당 패턴을 저장하여 에러 메세지로 나타날 수 있도록 했다. 그리고 입력했던 새로운 비밀번호와 비밀번호 재확인 input에 입력하는 값이 일치하는지 setIsMatched(newPassword === confirmPassword) 함수 호출로 isMatched에 일치 여부를 저장하도록 했다.

useEffect를 사용하여 값의 변화를 감지하고, 비밀번호 정책을 검증하고 일치 여부를 확인하여 에러 메시지 상태를 바로 업데이트 했다.

* 조건문에서 newPassword나 confirmPassword의 길이가 0 이상이어야지 에러 메세지를 나타나도록 한 이유 : 사용자가 아무 것도 입력하지 않은 상태인데 에러 메세지부터 본다면 '어..? 뭔가 잘못되었나..? 내가 값을 입력하고 판단해도 될 것 같은데.. 별로인데?' 라고 생각할 것 같아서 :) *

비밀번호 재설정 페이지를 구현하는데 useEffect를 사용하지 않으니 값이 하나씩 밀렸었다. 값을 콘솔에 찍어보니 값이 한 글자씩 덜 나와서 '아.. 이건 좀 아닌데' 싶어서 코드 작성 방법을 바꿨다.. ㅎㅎ 사실은 원래 비밀번호 재입력 칸에 사용자가 입력을 다 끝낸 것 같으면..? 비밀번호 일치 여부를 판단하고 싶었는데 어떻게 해야할지 감도 안 잡혀서 그냥 입력할때 바로 바로 판단하도록 했다.