react-hook-form으로 기본값 설정하기

Question

안녕하세요 지금 section31과제를 진행하고 있습니다. 제가 지금 useForm으로 포트폴리오 과제를 진행하고 있는데 초기값 설정하는 데 어려움이 있습니다 현재 useForm 이 가지고 있는 defalutValues속성 으로 기본값 을 설정하는데 console 에서는 data값 이 찍히는데 defaltValues 에서는 undefined값 으로 나옵니다. 변수가 먼저 선언되고 값이 할당이 안되는 걸까요? useForm 에서는 기본값 을 어떻게 설정해야 하는걸까요? useForm 을 사용하기 시작했는데, 점점 벅찬거같아요... 이제라도 input 으로 변경해야할까요.. export default function BoardWriteUI({isEdit, data, onSubmitCreate, onSubmitUpdate, onClickMoveToBack}) { console.log(data) const {register,watch, formState : {errors, isValid}, handleSubmit} = useForm({ mode : 'onSubmit', defaultValues : { writer : data?.fetchBoard.writer, password : "", title : data?.fetchBoard?.title, contents : data?.fetchBoard?.contents, } });

노원두 · Answer

안녕하세요! 반가워요 님! 해당 내용은 사실 react-hook-form과는 상관이 없답니다! defaultValues는 초기값을 의미하며, 최초 1회만 등록됩니다. 따라서, defaultValues가 셋팅되는 최초 1회 등록시 data?.fetchBoard.writer 부분에서 data?. 가 존재하지 않으므로 undefined 가 나오게 된 거예요! 그리고, console.log(data) 부분은 최소 2번 찍혔을 것 같아요! 최초 1번째는 undefined로 찍혔을 것이고, 두 번째에 제대로된 데이터가 찍혀있게 되겠죠?!^^ 따라서, 해당 내용은 react원리와 관련 이 있으며 react-hook-form과는 상관이 없어요! 이를 재확인 해보는 방법은 useState의 초기값으로 등록하여 검증해 보는 방법도 있답니다! const [aaa, setAaa] = useState(data?.fetchBoard.writer) 동일한 원리에 의하여 위 코드의 aaa에도 undefined가 들어가게 되겠죠?!   반가워요님! 지금까지 잘 해오고 계십니다!^^ 실제 실무에서는 react-hook-form을 사용하거나, 꼭 react-hook-form이 아니더라도 회사 내부적으로 우리회사만의 form 라이브러리를 만들어서 사용 하게 되고, 작동 방식은 거의 동일하다고 보시면 됩니다! 따라서, 잘 만들어져 있는 유명한 react-hook-form 라이브러리에라도 반드시 익숙해 지는 것이 중요하며, input으로 돌아가셔서는 안됩니다! ㅎㅎ 해당 독스를 책이라고 생각하시고 반복 해서 읽으면서 전문가로 성장해 주세요!