프로젝트를 진행하던중 textarea의 글자수를 세는 기능이 필요했다. 그래서 음~ 금방 끝나겠군 이라는 마음으로 빠르게 코드를 작성하였으나..? 문제가 생겨서 정말 ^^ 몇시간을 붙들었다..
그렇게.. 겨…우.. 해결할 수 있었다.
기존 코드
const [byte, setByte] = useState(0)
const countByte = (e) => {
setByte(e.target.value.length);
}
...
<textarea
...
onChange={countByte}
{...register
...}
></textarea>
<span>{byte}/150</span>
기존 코드에서 react-hook-form을 사용해야 했고, textarea의 입력값이 필요했기에 onChange를 통해서 value값을 받아왔다.
근데 아무리 해도 값이 안 나오고…
그래서 서칭을 계속 했는데 나도 이런 문제인 줄 알고 currentTarget으로 바꿨으나 실패..
그렇게 같이 프로젝트를 하는 친구에게 코드를 봐달라고 했고.. 문제는 react-hook-form의 register이었다는 것을 알게되었다…
문제
react-hook-form에도 onChange가 존재하는데, 이게 우리가 가장 널리 알고 있는 일반 이벤트 핸들러의 onChange와 이름이 같기 때문에 충돌이 나는 것 같았다.. 흙..
따라서, react-hook-form의 onChange를 사용하여 코드를 변경하기로 했다.
해결 코드
register안에 onChange를 넣어 기존 코드에서 countByte 함수를 onChange에 바로 작성하였다. 이렇게 하니 기존코드보다 더욱 간결해졌다.
구현 영상
마무리
해당 문제를 통해 아직 react-hook-form을 잘 모르고 있다는 것을 알게되었다… 더.. 많은 공부가 필요할 듯 하다..
참고
react hook form에서 form데이터 관리하기
입력을 다루는 다양한 방법, React-hook-form
stack overflow
Hook Form으로 상태 관리하기.
Comments