react-hook-form의 기본값을 지정하는 방법

Question

react-hook-form을 사용해서 간단한 폼을 만드려는데 혹시 기본값을 지정하는 방법이 있을까요? useEffect를 사용해서 기본값을 지정해보려고 시도해봤는데 필드가 여전히 비어서 나옵니다 ㅠㅠ. 코드 아래 있어요.

이은재 · Answer

안녕하세요. react-hook-form의 field에 각 값을 지정해주는 setValue 함수가 따로 있는데 사용해보셨을까요? 해당 함수를 사용하시면 데이터를 확실하게 업데이트할 수 있을 것 같습니다.

useForm()에서 함께 가져오면 되고

useEffect(() => {
    if (data) {
        setValue([
            { name: data.name }, 
            { phone: data.grade }
        ]);
    }
}, [data]);

이런식으로 사용하시면 될 것 같아요.

관련 공식 문서 링크 같이 남겨둡니다
https://react-hook-form.com/api/useform/setvalue/