221111 TIL useForm의 onChange (feat. register)

오늘은 게시글 수정 기능 구현하다 만난 문제와 해결방법을 적어보려고 한다.

 

우선 게시글을 수정할때 react-hook-form의 useForm을 이용해서 form을 생성해 수정된 게시글을 제출할 생각이였다.

수정할때 요구사항으로는 수정하려는 게시글의 제목과 내용을 수정할때 수정 폼에서 내용이 이미 입력된 상태여야 했다.
그래서 input태그 안에 value를 설정하고 value안에 기존에 갖고 있던 제목과 내용을 넣어줬다. 그리고 value값을 설정해주었기 때문에 입력할때 변화가 일어나게 하려면 input태그 안에 onChange를 넣어서 글자가 바뀌면 useState를 이용해 value값을 바꾸려고 했다.

그런데 아무리 입력해도 value값이 바뀌지 않고 변화하지 않는 문제가 발생했다.
처음에는 useState와 value를 잘못 설정했나 생각해서 value를 빼봤는데 그래도 동작하지 않았다.

 

문제의 input 태그 코드

어떤것이 문제인지 파악하고자 문제의 원인이라고 생각이 되는 onChange가 제대로 동작하고 있는건지 작동하지 않는건지 확인하기 위해 onChange 함수 안에 consol.log를 통해 함수가 실행이 되는 건지 확인해봤다.

그런데 콘솔창에는 아무런 반응이 없다는것을 확인했다. 일단 onChange가 작동하지 않는게 문제상황임을 인지했다.

 

근데 아무리 생각해도 input태그 안에 onChange가 작동하지 않을 이유가 없다고 생각했는데 작동하지 않으니 매우 당황했다.

어떤게 문제인지 한참을 생각하던 중 지금까지 useForm을 사용할때 input에 onChange를 넣은적이 없었던게 생각이 났고 이번에 게시글 수정할때 기존에 쓰여진 게시글의 제목과 내용을 input태그안에 넣은 상태로 나타내게 하기 위해 value값에 제목과 내용을 넣어줘야했기 때문에 onChange를 사용했었는데 onChange가 작동하지 않는게 useForm과 관련이 있는건가 생각을 해서 검색을 해봤다.

 

useForm의 onChange를 검색해보니 react-hook-form 공식페이지에 useform의 onChange관련한 내용이 나와있었다.

https://react-hook-form.com/api/useform/register

기존에는 input태그안에 onChange함수를 사용했었는데 위 사진을 보면 useForm에서는 onChnage를 input태그안에 사용하는게 아니라 register안에서 사용하는것을 알게 되었다. useForm때문에 onChange가 작동하지 않았던게 맞았다.

정확히는 useForm때문이 아니라 register를 input태그안에 넣어줬기때문에 onChange의 위치가 잘못되었던것이였다.

 

공식 페이지의 사용법처럼 onChange를 register안에 넣고 input태그에 있던 onChange함수를 지우고 실행해보니 onChange함수가 잘 작동하고 value값도 잘 바뀌는것을 확인할 수 있었다.

 

오늘 게시글 수정 / 삭제, 댓글 수정 / 삭제가 목표였는데 댓글 수정을 아직 구현하지 못한 상태라 얼른 마무리 하고 일주일간 스프린트 목표를 지키기 위해 내일은 또 다른 기능을 구현해보자