[React] input 태그 onKeyDown 엔터키 - 한글 랜더링 두번 이슈 해결

개요

React 에서 검색 기능 작업중에 검색 버튼 클릭 외에 엔터키로도 검색을 작동시키고자 onKeyPress 를 사용했는데 deprecated 됐다고 하여 onKeyDown 기능을 사용하게 됐고 onKeyDown 이 사용된 input 태그에 한글을 입력후 onKeyDown 을 작동 시 랜더링이 2번 돈다는 문제를 발견하게 된것이다.

onKeyPress is deprecated.

---

문제 확인

해당 작업은 React 에서 쿼리 스트링을 활용하여 검색 기능을 구현하는 작업이였다. 그리고 빈값으로 검색시 리스트 전체가 나오고 특정 키워드로 검색시 키워드와 관련된 내용만 검색되도록 기능을 만들었다.

 

문제 발견 당시의 코드는 아래와 같다.

input 태그에 값을 입력하면 setKeyword 를 통해 keyword 에 값이 담긴다.

그 후 onKeyDown 을 사용하여 엔터 클릭시 setSearchParams 를 통해 url 에 쿼리 스트링을 변경하여 검색을 진행하고 이후 setKeyword(' ') 를 통해 검색 input 태그를 빈칸으로 초기화 시키는 기능 구현이다.

 

하지만 위처럼 작업 후 한글 입력 후 엔터키로 검색을 진행하면 아래 이미지와 같이 랜더링이 두번 돌면서 검색기능에 이슈가 생긴다. 한글 키워드에 끝글자만 쿼리스트링으로 넘어간다.

 

첫 랜더링에서 "사과" 라는 단어를 성공적으로 쿼리스트링에 넘겼다가 두번째 랜더링에서 "과" 라는 끝 글자만 쿼리스트링으로 넘겨줘 발생하는 문제이다.

검색 버튼을 클릭하면 문제 없이 정상 작동 한다.

그리고 아래와 같이 영어로 입력후 엔터키로 검색을 진행해도 랜더링은 한번만 돌고 문제는 안생긴다.

 

 

즉, 문제는 input 태그에 한글을 적고 onKeyDown 으로 엔터키 검색을 진행하면 랜더링이 2번 발생하고 두번째 랜더링에서는 검색 키워드가 끝글자만 쿼리스트링으로 날아가 검색이 의도한데로 진행 안된다는 이슈이다.

 

---

문제 해결

상기 문제는 React 의 useRef() 기능을 활용하여 상기 문제에 대응하였다.

아래는 해결 코드이다.

실시간으로 값 반영이 가능한 useRef() 에 current 속성을 활용하여 첫랜더링에서는 검색 진행과 동시에 키워드를 초기화해주고 useRef에 current 값을 true 로 준다. 그 후 2번째 랜더링에서 current 값이 true이기 때문에 setKeyword 가 빈값으로 한번 더 진행된다.

첫번째 랜더링에서 setKeyword('') 를 한번 더 해준 이유는 영어 검색때문이다. 이 처리를 안해주면 영어 키워드 검색시 input 태그가 빈값으로 초기화 되지 않는다.

위 이미지처럼 "사과" 단어가 정확하게 들어간다.

 

아래 Reference 에서 참고한 글은 onKeyDown 에 한글 랜더링 두번 발생 이슈의 다른 사례이다.

 

Reference

https://literate-t.tistory.com/390

[React] 한글 입력 시 onKeyDown 이슈