마이페이지 수정 트러블슈팅

문제상황

마이페이지의 이미지만 수정하면 닉네임이 유효성통과를 못한다.
이유는 닉네임이 아무런 글자가 없어서, 즉 공백이라서

그럼 이미지만 바꾸고 싶은 사람들도 반드시 닉네임을 한 글자라도 수정을 해야 하는 불편한 상황 초래

---

코드분석

 const onClickEditBtn = () => {
   const [username, setUsername] = useState('');
   
    const nameCheck = /^[가-힣a-zA-Z0-9]{2,10}$/;

    if (!nameCheck.test(username)) {
      alert('유효하지 않은 양식입니다.');
      return;
    }
    const myPost: IMyPost = {};
    if (username) myPost.username = username;
    if (selectedImage !== undefined) myPost.selectedImage = selectedImage;
    editMypageMutation.mutate(myPost);

    navigate('/main');
  };

	return(
     <S.NewNameWrapperDiv>
          <S.UsernameSpan>사용자 이름</S.UsernameSpan>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
          <S.NameInput
   			 onChange={onChangeUsername}
   			 type='text'
   			 defaultValue={data?.data.username}
   			 />
      	</div>
    </S.NewNameWrapperDiv>
)

nameCheck가 유효성 검사고, 내용을 보면 2글자부터 10글자까지다.
그리고 유효성검사를 username에 하고 있다.
근데 보시다시피 username은 초기값이 공백이다.

그럼 인풋창에 보이는 값은 뭘까?
바로 내가 defaultValue로 설정해놓은 data값이다.

저러니 유효성통과를 못한다고 강퇴를 당하는 것.

코드 수정

 const [username, setUsername] = useState(data?.data?.username);

이러면 초기값이 공백이 아니라, 유저의 닉네임이다.
그럼 유효성통과가 된다.

추가로 이번에 새롭게 안 사실은 if (!nameCheck.test(username)) 이 부분이다.

유효성검사를 이렇게 할 수 있다는 사실을 깨달았다.