닉네임 자음,모음 처리 및 닉네임 변경하기

닉네임 변경 및 초성에 대한 에러 처리를 위해 다음과 같은 코드 작업을 했다.

const onValid = async ({ nickName }: NickNameProps) => {
  const auth = getAuth() // 인증 정보 가져오기
  if (auth.currentUser) {
    // auth에 현재 유저 정보가 있을 때 새로 입력한 닉네임을 displayName으로 설정
    await updateProfile(auth.currentUser, {
      displayName: nickName,
    })
    setNickName(nickName) // 닉네임 업데이트
  }
}

처음에 대체 유저정보를 어떻게 가져오나 하다가 다른 팀원분이 해놓으신걸 그대로 이용했다.

getAuth를 통해 인증정보를 가져왔으면
auth 내에 있는 currentUser를 updateProfile 메소드를 이용해서 내가 입력한 이름 즉, nickName로 업데이트한다.
setNickName 함수를 이용해서도 업데이트한다.

;<input
  type="text"
  {...register('nickName', {
    required: true,
    minLength: 2,
    maxLength: 5,
    pattern: /([0-9a-zA-Z가-힣\x20])/i, //초성 미포함
  })}
/>

{
  errors.nickName?.type === 'pattern' ? <ErrorMessage>초성은 불가능합니다.</ErrorMessage> : null
}

input 태그에 있는 pattern과 errors.nickName?.type이 pattern인지 maxLength 인지 등등을 확인시켜주는 장치가 따로 마련되어있다.

errors.nickName?.type이 어떤 ValidatioRule(문서에 이렇게 나와있다.)인지(maxLength,minLength,pattern 등등) 확인을 시켜주기 때문에 자동완성도 되고 편리하다.

그리고 자음,모음에 대한 처리도 조금 애를 먹었는데 정규식 테스트 사이트에서 직접 테스트를 해보니까 익숙해지는 거 같다.

/([0-9a-zA-Z가-힣\x20])/i는 자음과 모음만 있는 경우에 정규식 테스트가 통과가 안되도록 하는 방식이다.

참고로 /([^가-힣ㄱ-ㅎㅏ-ㅣ\x20])/i는 자음,모음만 있어도 통과가 가능하다.

const Profile = () => {
  const [isOpen, setIsOpen] = useRecoilState(profileImage)
  const userObj = sessionUserData()
  const [nickName, setNickName] = useState(userObj.displayName)

  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
  } = useForm<NickNameProps>({ mode: 'onChange' }) // mode: 'onChange' => 사용자에게 실시간으로 피드백 제공
}

useForm에서의 mode를 onChange로 하면 사용자에게 실시간으로 피드백을 줄 수 있어서 작은 규모에서는 상관없지만, 프로젝트 규모가 커질 경우 리렌더링이 일어날 수 있기 때문에 성능에 안 좋은 영향을 줄 수 있다.

References

https://react-hook-form.com/api/useform/#mode