리액트에서 구글 번역기가 번역하면서, DOM 트리를 변경해 렌더링이 되지 않는 현상

문제 상황

개발을 진행하다가, PM에서 데이터가 이상하다고, 확인해달라는 요청을 받았다. 확인을 해본 결과, 데이터베이스 및 서버에서 내려오는 데이터는 정상이였다. 하지만 화면에서 업데이트를 시키지 않고, 기존에 데이터가 그대로 남아있어 화면 업데이트가 안되는 상황이였다. 재현을 해봤을 때는 아무런 문제가 없어서 혹시나 하고 구글 번역기를 켜고 재현을 해보았을 때 버그가 발생하였다.

원인

검색을 해보니, 비슷한 현상이 이미 보고가 되어있었고, 원인을 파악하기 위해서 살펴보았다.

구글 번역기를 켰을 때 변경된 텍스트가 업데이트 되지 않는 이유는 다음과 같다.

• 웹 사이트에서 구글 번역기를 켰을 때 번역기가 텍스트를 <font> 태그로 대체한다. 하지만 리액트에서 변경된 것을 감지하지 못해서, 이미 DOM 트리에서 사라진 객체를 참조한다는 것이다.

• 텍스트는 조건부로 렌더링이 되며, 부모 노드의 유일한 하위 노드가 아니다. 그런 후에 텍스트 노드가 제거되면 React는 parent.removeChild(textNode)를 호출하고 텍스트 노드가 더 이상 상위 노드의 하위 노드가 아니기 때문에 삭제한다.

  • 조건부로 렌더링 된 텍스트 노드가 부모의 유일한 자식일 때는 던지지 않는다.

• 텍스트 노드가 앞의 노드가 조건 부로 렌더링되고, 그런 다음에 노드가 삽입 될 때 parent.insertBefore(someNode, textNode)를 호출하고 textNode가 더이상 상위 노드가 아니기 때문에 예외를 던진다.

해결책

• 해결책은, 텍스트를 <span> 태그로 감싸서 내용이 <font> 태그로 대체되더라도 리액트에서 참조하는 노드가 DOM 트리에서 사라지지 않게 하는 방법이다.

참고 문헌

• Make React resilient to DOM mutations from Google Translate