개발자

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

2023년 06월 28일조회 228

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

김병훈님의 프로필 사진

질문을 봤을 때에는 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. 막히시는 부분의 코드를 좀 더 공유해주시면, 다른 분들께서도 편하게 도움을 주실 수 있을 것 같습니다.

profile picture

익명

작성자

2023년 07월 06일

감사합니다! 회사 코드라 공유를 못드렸네요 ㅠㅠ 링크 걸어주신 것 통해서 해결했습니다!!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!