front/react

[ react, MUI ] 대리님이 알려준 CheckBox onChange에대한 데이터 타입 변환 공통 처리

dev_popo 2024. 8. 22. 16:43

MUI 컴포넌트중에 CheckBox가 있다.

체크된 상태, 아닌 상태를 왔다갔다 하며 데이터 변환을 전달하는 용이한 컴포넌트이다. 나같은 경우 checked상태면 'Y'라는 값을 전달하고, 체크가 풀리면 'N'을 전달한다. 그걸 reactHookForm을 사용한다면

setValue("flag","Y") 이런식으로 썼다. 그랬더니, 이게 ㅎ form변화가 실시간으로 개빨리 적용될 때가 있고 아닐 때도 있어서 그런지 됐다 안됐다 하는 거 아니겠음? 그래서 setValue("flag","Y",{ shouldDirty:true })옵션까지 써재끼면서 왔다갔다를 그렇게 했다...

그걸 본 대리님은..

이렇게 공통을 수정하셨고

난 이렇게 사용하게 되었다 ㅎ 얼마나 편한지 원,,control를 인자로 받는 만큼 이 컴포넌트는 react hook form과 연결되어 있는 컴포넌트로 저렇게 체크 값이 변경되면 자동으로 데이터를 trans 해주어 form에 locationNullFl라는 변수에 값을 전달해준다. 그럼 알아서 됨.

onChange될 때마다 다른 기능 없이 오로지 form의 값을 알맞는 형태로 변환하는 거라면 저런 공통은 너무나 편하다. 굳이 함수를 또 만들 필요가 없다.