[IOS] 한글 입력 버그 해결하기 👑

🍴 배경

본격적으로 크로스 브라우징 테스트가 들어가면서 크롬에서는 발견하지 못했던 이슈들이 나오기 시작했습니다. 그 중 'form에 글자를 입력하면 validation 에러 메시지가 빠르게 깜빡거리는 현상'을 해결해보려 합니다. (하지만 싸워서 지는 건 늘...)

🧂 원인

근본적인 원인은 '한글이 입력될 때 순간적으로 이전에 입력됬던 글자가 삭제되고 새로운 글자로 교체되는 현상'(서드파티 키보드 밀림(커서 깜빡임) 현상 해결하기)이었습니다. 웹에서 한글을 입력할 때 발생하는 현상이라는데, 보통은 키보드와 브라우저의 연동이 완벽해서 사용자가 인식하지 못할 뿐이라네요. 핸드폰이 느릴수록 더 잘 보인다고 합니다.

🥞 해결 방향

1. onChange 이벤트 대신 다른 eventListener 사용

• [Javascript] ⭐️Event⭐️

결과적으로 이 방법은 기각됐습니다. 애초에 이벤트가 언제 발생하느냐와 상관없이 발생하는 문제였기 때문입니다.

2. 렌더가 되는 타이밍 변동 (<-PICK✨)

• Make React useEffect hook not run on initial render

• useLayoutEffect 훅에 대하여

이걸 이렇게 저렇게 잘 하면 해결되지 않을까요? 깜빡거림이 일어나는 form 요소 안에 value값을 state로 연동하고, state가 변동된 후에 화면이 렌더되도록(useLayoutEffect 사용) 한다면...
아니면 차선책으로 state의 길이("문자열".length)이 달라질 때만 validation이 돌아가도록 할 수도 있습니다. 적어도 에러 메시지가 나타났다 사라졌다하는 현상은 없어질 테니까요.

🔥 결과

.........안 되잖아......

• 첫 번째 방식의 문제 🤦🏻‍♀️ : 1) 사용자가 form에 값을 입력한다. 2) 화면을 다시 렌더링하기 전에 state를 미리 바꾼다. 3) form에 바뀐 값이 입력된 채로 렌더링된다. 이 순서대로 진행이 되는 게 목표였습니다. 그런데 애초에 화면이 다시 렌더링되는 조건은 state값이 변할 때죠. 이에 대해서 찾아봤더니 다음과 같은 글이 나왔습니다.

  • How can I force a component to re-render with hooks in React?

  hook을 사용해서 강제로 리렌더링 시키는 방법이 있는 것 같네요. (살려줘...) 이쪽은 좀 더 파봐야겠습니다.

• 두 번째 방식의 문제 🤦🏻‍♀️ : 이건 state가 아닌 form에 입력된 값으로 validation이 돌아갔을 때 시도해볼 수 있던 방법이었습니다. 지금은 state로 validate 되도록 수정된 상태인데도 같은 현상이 일어나고 있습니다. 즉, state가 state.length로 변경된다고 없어질 문제가 아니라는 뜻입니다.

애초에 제가 간과했던 건, 이 에러가 더 작은 단위로 발생하는 현상이었다는 것입니다. 이벤트 단위도 아니었고, 생명주기 단계도 아니었습니다. 브라우저가 한글 입력에 대응하는 방식 자체였습니다. 차라리 사용자의 브라우저가 느려지지 않게 코드 최적화를 하는 게 나았을 지도 모릅니다...

---

앞으로 물 속에서 코딩을 하겠습니다.
같은 문제를 겪어보신 분은 부디 댓글로 도움을 주세요(도움!!)