safari에서 발생하는 react-hook-form의 오류
문제 발생
사내 프로젝트 진행 중, react-hook-form의
watch로 email 값을 감지하는 부분에서 문제가 발생했습니다.
이메일로 전달받은 인증코드와 이메일 주소를 API를 통해 전달 후
다음 화면으로 넘어가려던 타이밍이었는데요.
'Enter'키로 통신 함수를 호출하면
통신을 마친 뒤 Chrome에서는 watch로 감지하던 email 값이 유지되는 반면,
Safari에서는 값이 유지되지 않고 undefined로 초기화가 이뤄지는 오류가 발생했습니다.
드디어 크로스 브라우징 이슈를 경험하게 되었네요ㅎㅎㅎ
원인 파악
여기저기 console로 확인하며 체크해본 결과,
특정 useEffect가 동작 후 email 값도 초기화가 이뤄지는 것을 확인했는데요.
문제가 발생하는 곳으로 추정되는 useEffect 부분에 집중해봤습니다.
useEffect 내부의 코드는 특이한 것이 없었고 또한
dependencies에도 영향을 미칠만한 요소가 없었어요.
혹시 몰라 react-hook-form의 버전을 업데이트해봤지만 여전히
Safari에서는 email 값이 undefined로 초기화가 되고있었습니다.
슬슬 답답해지기 시작하던 차에 안되겠다 싶어 강제로라도
값을 유지시켜줘야겠다는 생각이 들었습니다.
해결 방법
처음엔 watch의 값을 state에 저장해서 watch 값을 대체했을 때, 기존 값을 잘 유지했습니다.
하지만 저는 react-hook-form과 yup를 사용한 유효성 검사를 시행 중이어서
watch값이 무조건 필요한 상황이었는데요.
useEffect를 추가로 사용하고 내부에서 react-hook-form의 setValue와
email 값을 저장하고 있는 state, 전역 context로 관리되는 email value를 사용해
watch 값을 유지시켜주는 것으로 해결했습니다.
dependencies에는 인증번호 전송 시 변경되는 state를 사용해줬구요.
문제를 해결하고도 왜 이런 문제가 발생하는지는 아직 파악을 못했습니다.
react-hook-form의 깃허브 issue 탭을 뒤져봤지만
연관된 문제를 발견하지 못했어요.
어설프게나마 문제를 해결했지만 또 다른 해결 방법을 찾아봐야겠습니다.
+ 5월 30일 추가)
태그 기본 동작으로 인한 오류였습니다!
크롬 환경에서는 input의 onKeyUp 이벤트 핸들러에서 'Enter'를 통한 함수를 동작시켜도 값이 유지되었지만
사파리 환경에서는 값이 초기화되는 것이라는걸 알게 되었어요.
e.preventDefault()를 사용해 기본 동작을 막아줬더니 크롬과 사파리 모두 정상 동작하는 것을 확인했습니다.
늦게나마 원인을 찾아 해결해서 다행이네요..!
하지만 useEffect와 state 범벅이 되어버린 코드를 리팩토링 해야겠네요.
마침 리액트 공식 문서에서 useEffect에 관한 코드를 보고 있었는데 잘됐습니다?!!