radio 버튼 클릭시 변경하는 form 값이 한박자 늦게 변경되는 문제가 있습니다.

Question

radio버튼에서 onClick으로 react hook form에 있는 값을 바꾸고 있습니다.
styled-compontent에서 props값을 전달하면 될것 같은데 한 박자 늦게 바뀝니다.
제 생각에는 랜더링이 onClick이 반영되기 전에 실행되고 있는 것 같은데
한 박자 늦게 랜더링을 시키는 방법이 따로 있는 걸까요? 아니면 styled-component의 props를 버튼 클릭했을 때 연동시킬 수 있는 방법이나 키워드가 따로 있나요?

김병훈 · Answer

질문을 봤을 때에는 styled-component로 만든 radio type의 input에 isChecked와 같은 값을 전달하여 선택되었는지를 보여주도록 구현하신 것으로 보이는데요.
지금 드는 생각으로는 여러 방법으로 문제 해결이 가능할 것 같습니다.
react-hook-form의 useWatch를 사용하여, 해당 값이 변경되었을 때 뷰의 업데이트가 트리깅되도록 하는 방법이 있을 것이고요.
react-hook-form (https://react-hook-form.com/docs/usewatch)

혹은 props를 전달하지 않고, checked를 통해 스타일이 수정되도록 구현 방식을 변경해보셔도 될 것 같아요.
(참고 링크: https://velog.io/@eoskandlv/TIL-32-Input-radio-%EB%B2%84%ED%8A%BC-%EC%8A%A4%ED%83%80%EC%9D%BC)

ps. 막히시는 부분의 코드를 좀 더 공유해주시면, 다른 분들께서도 편하게 도움을 주실 수 있을 것 같습니다.