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

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

해결된 질문

작성

1.2K

수정됨

안녕하세요 지금 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,
    }
  });

react node.js seo graphql next.js

답변 1

노원두

지식공유자

안녕하세요! 반가워요님!
해당 내용은 사실 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으로 돌아가셔서는 안됩니다! ㅎㅎ
해당 독스를 책이라고 생각하시고 반복해서 읽으면서 전문가로 성장해 주세요!

반가워요

질문자

감사합니다! defalutValue에 등록되지 않은 이유를 알았습니다. 나중에 값이 들어오는데 왜 계속 undefined인가 했는데, 최초 1회만 등록되어서 그렇군요!

말씀하신대로 react-hook-form으로 계속 해서 reset을 이용해서 초기화하는 방법을 찾았습니다~ 감사합니다!

인프런 커뮤니티 질문&답변

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