[🚨 Error 🚨] React-Hook-Form 드롭다운 value 동기화 에러

문제가 발생한 배경

드롭다운의 값을 React-Hook-Form으로 제어할 때 value 값이 동기화가 되지 않는 상황

영상과 같이 form을 제출하면 value 값이 동기화되지 않고 초기 값이 제출되고 있다!

---

문제의 원인 알아보기

1. Dropdown 컴포넌트의 input에 value가 정상적으로 들어가있는지 확인해보기

<input type="hidden" name="assigneeUserId" value="8494">

개발자 도구로 확인해봤을 때 value 값은 정상적으로 들어가 있다.

2. input의 value 값 지워보기

React-Hook-Form의 register 함수에는 기본적으로 name, value, onChange, onBlur 등이 포함되어 있기 때문에 value 값을 지정하지 않고 rest props으로 내려주면 된다.

<input type="text" {...register} />

이렇게 변경해주고 input의 값을 입력하고 submit하면 정상적으로 값이 동기화된다.

↪ value를 직접 지정해주지 않아야 하는데 나는 Dropdown의 하위메뉴를 클릭하면 그 클릭한 하위메뉴의 id를 value로 지정해줘야 하는 상황이다...

---

문제 해결 방법

1. Dropdown의 input을 제어형 컴포넌트로 관리하기

useState로 Dropdown의 input value를 관리하면 문제가 없을 것 같지만 내가 사용하는 모달에서는 Dropdown만 있는 것이 아니라 다른 input 값들도 있기 때문에 다른건 React-Hook-Form을 사용하고 Dropdown의 input은 useState로 관리하는 것이 이질감이 든다..

2. Dropdown의 input에 ref를 연결하기

Dropdown의 input에 ref를 forwardRef로 연결해서 제출 버튼을 클릭하면 해당 input의 value 값을 가져오는 방식도 있지만 1번 방식과 같이 React-Hook-Form으로 관리하지 않는 것이 이질감이 든다..

3. <select>, <option> 태그 사용하기

Dropdown에 <select>, <option> 태그를 사용하면 React-Hook-Form을 사용해서 Dropdown의 value 값을 동기화할 수 있지만 기본 <select>, <option> 태그의 스타일을 사용해야 해서 디자인이 별로인 단점이 있다..

사실 위의 방법들은 금방 생각났지만 다 마음에 들지 않는 방법이여서 React-Hook-Form의 공식문서에 들어가서 해결 방안이 없는지 찾아보던 중 setValue라는 함수를 찾았다!

4. React-Hook-Form의 setValue 함수 사용하기

사용방법은 크게 어렵지 않은 것 같다!

setValue(name, value, options)

name: 이름을 단일 필드로 타겟팅 한다.(register 함수의 name을 적어주면 된다.)
value: 필드의 값, name value에 넣고 싶은 값을 넣어주면 된다.(필수)
options: options의 여러 기능들도 있지만 나는 지금 사용하지 않아도 된다.

• EditToDoModal 코드 수정

function EditToDoModal({showModal,handleClose,}: ModalProps) {
  const {
    register,
    formState: { isValid, isSubmitting },
    setError,
    handleSubmit,
    setValue,
  } = useForm<FormValues>();
  
  <form onSubmit={handleSubmit(handleValidSubmit)}>
    <div>
      <Dropdown
        usage="state"
        data={columns}
        initialData={{ title: currentState?.title, id: currentState?.id }}
        register={register('columnId')}
        setValue={setValue}
        />
      <Dropdown
        usage="manager"
        data={members}
        initialData={{
          nickname: assignee?.nickname,
            profileImageUrl: assignee?.profileImageUrl || '',
            id: assignee?.id,
        }}
        register={register('assigneeUserId')}
        setValue={setValue}
        />
    </div>
    <div>
      <ModalButton onClick={handleClose}>취소</ModalButton>
      <ModalButton type="submit" disabled={!isValid || isSubmitting}>
        수정
      </ModalButton>
    </div>
  </form>
}

• Dropdown 컴포넌트 코드 수정

const handleItemClick = (data: EditTodoFormData): void => {
  setIsSelectData({
    isClick: true,
    id: data.id,
    title: data.title,
    nickname: data.nickname,
    profileImageUrl: data.profileImageUrl,
  });
  setValue(register.name, data.id);
};

 <input type="hidden" {...register} />

---

최종 동작 영상

이제는 form 제출하면 value 값이 정상적으로 동기화된다🙃🙃🙃