React Hook Form 의 setValue 를 사용하여 초기값 설정

마이페이지 수정 기능을 진행 중이다. 구현해야 할 것은 닉네임 수정하기이다.

 

React Hook Form 을 사용하기 전에는 useState 로 닉네임 상태를 관리하였고 DB 에서 조회한 정보로 setNickname() 해주면 됐는데.. react hook form 은..? 이 사항을 놓치고 있어서 수정페이지 가면 DB 에서 가져온 유저 정보가 보이지 않는다. 보통 수정페이지 가면 원래 설정해 놓은 정보가 뜨기 마련이니.. 나는 기존 정보를 표시해 줄 데이터가 필요했다..!

 

이슈

React Hook form 을 사용할 때 DB 에 있는 기존 정보를 화면에 어떻게 보여주어야 하는가? 현재는 수정 버튼을 누르면 기존의 닉네임이 보이지 않는다.

 

해결

이것저것 찾아보니.. setValue 가 있었다. 생각보다 쉽게 찾음 😮‍💨

const ProfileUpdate = ({ userId }: { userId: string }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
  } = useProfileForm();

.. 생략

  const { data: profileData, isLoading: isProfileLoading, isError: isProfileError } = useProfilesQuery(userId);

  useEffect(() => {
    if (profileData && profileData.profiles?.user_nickname) {
      const userNickname = profileData.profiles.user_nickname;
      setValue('nickname', userNickname); // nickname 초기값 설정
      setCount(userNickname.length); 
    }
  }, [profileData, setValue]);

... 생략

setValue(변수, 값) 이런식으로 사용하면 된다.

 

결과

마이페이지 메인에서 수정 버튼을 누르면 수정 페이지로 이동한 후, '밍밍' 이라는 DB 에서 조회된 유저 정보가 기본으로 설정되어있는 것을 볼 수 있다!

 

참고 자료

https://react-hook-form.com/docs/useform/setvalue

useForm - setValue