reagent input 한글 (및 IME 문자들) 입력 할때 value 속성으로 인한 버그

clojurescript에서 쉽게 사용할 수 있는 react 인터페이스 reagent 상에서 한글을 입력할때 한글이 분해되서 나타나는 버그를 맞닥뜨림.

[:input.input {:type "text" 
			   :on-change (fn [e]
                             (let [value (or (-> e .-target .-value) "")]
                  			 (re-frame/dispatch [::profile (assoc profile :name value)])))
               :value (:name profile)}]

위 코드로 생성된 인풋 필드에 한글로 '뭐여이게?'를 입력하면 아래와 같이 분해되어 나타난다.

위 현상은 위 코드에서 :value 속성을 제거하면 사라지게된다.

원인은 한글은 조합해서 만드는 IME 문자라서, 조합이 이뤄질때마다 on-change 핸들러가 호출되기때문에 발생하는 문제이다.

예를 들어 '뭐'를 입력할때 'ㅁ', 'ㅜ', 'ㅓ' 순서대로 입력하는데, 사람이야 이렇게 입력하면 '뭐'라는 글자 하나가 만들어질때만 입력이되고 'ㅁ', '무' 까지는 캐럿 뒤에서 조합되고 있는 상태로 나타나야 한다는것을 알지만 브라우저는 그렇지 않으므로 매번 on-change 핸들러를 호출해 조합 중인 'ㅁ'도 '무'도 '뭐'도 모두 value 속성에 할당한다.

따라서 인풋 필드에 한글을 입력할 때 value 속성을 할당하지 않으면 브라우저의 기본 로직에 따라 인풋 필드의 값이 나타나므로 정상적으로 나타난다.

만약 초기값을 입력하고 싶다면 defaultValue 속성을 이용하자.

의문점...

근데, 원래 리액트에선 이런 오류가 없지 싶은데...?