번역기 Extension와의 고군분투

문제 발생

스마트 러닝 운영도중 지속적으로 “버튼 클릭시 화면이 사라진다”라는 CS가 들어왔습니다.

하지만 사내 모든 디바이스와 모든 브라우저를 통해 디버깅을 시도하였지만, 재현에 실패했습니다.

문제 원인 발견

그래서 한 고객과 원격제어를 통해 원인을 파악하고자하였습니다.

브라우저 버전과 윈도우 버전모두 최신상태였습니다.

다만 한가지 확인된 부분은 번역기가 켜져있었다는 것이었습니다.

그래서 번역기를 ‘자동 번역’으로 설정하여 디버깅을 시도해보았고, 재현에 성공하였습니다.

번역기의 동작원리는 어떤 브라우저나 동일하기에 다른 브라우저에서도 시도해보았고 브라우저의 문제가 아닌것을 확인할 수 있었습니다.

번역기 동작원리
번역기는 html파일에서 텍스트영역을 발견하면 파싱을 시도합니다. 만약 텍스트가 태그로 감싸져 있지 않다면 태그로 감싸게 되요.

그래서 만약 형제 엘리먼트가 있고, 형제 엘리먼트가 조건부렌더링을 하고 있다면 문제가 발생하게됩니다.

왜냐하면, 조건부 렌더링시 형제컴포넌트를 참조하여 렌더링을 진행하게 되는데, 태그로 감싸지면서 참조를 잃기때문이에요.

문제 해결

그래서 참조를 유지할 수 있도록 텍스트를 태그를 감싸주었고 문제를 해결할 수 있었습니다.

Before

<ToggleButtonBox>
  <Radio
    isClicked={privacyPolicyAgreeYN === 'Y'}
    onClick={() => {
      setPrivacyPolicyAgreeYN('Y');
    }}
  >
   동의함                <----------------------------------
  </Radio>
  <Radio
    isClicked={privacyPolicyAgreeYN === 'N'}
    onClick={() => {
      setPrivacyPolicyAgreeYN('N');
    }}
  >
    동의하지 않음          <----------------------------------
  </Radio>
</ToggleButtonBox>

After

<ToggleButtonBox>
  <Radio
    isClicked={privacyPolicyAgreeYN === 'Y'}
    onClick={() => {
      setPrivacyPolicyAgreeYN('Y');
    }}
  >
    <span>동의함</span>        <----------------------------------
  </Radio>
  <Radio
    isClicked={privacyPolicyAgreeYN === 'N'}
    onClick={() => {
      setPrivacyPolicyAgreeYN('N');
    }}
  >
    <span>동의하지 않음</span>      <----------------------------------
  </Radio>
</ToggleButtonBox>

참고자료

리액트에서 구글 번역기가 번역하면서, DOM 트리를 변경해 렌더링이 되지 않는 현상
Make React resilient to DOM mutations from Google Translate