[React] 브라우저 대응(with.javascript)

input type="password"일 경우, edge에서는 onChange시 자동으로 눈모양 아이콘이 보이게 됩니다.

mozilla/5.0 (macintosh; intel mac os x 10_15_7) applewebkit/537.36 (khtml, like gecko) chrome/98.0.4758.102 safari/537.36 edg/98.0.1108.62

edge가 모질라, 크롬 기반이라 방심했는데, 이렇게 호환성에 관한 이슈를 던저주시는군요.

요 아이콘과 겹쳐서 고민했고, 엣지만 따로 대응하는 방향으로 코드를 넣었습니다.

//눈모양 아이콘 브라우저 대응(edge에서 안보이도록 설정)
  const [browserName, setBrowserName] = useState('');
  useEffect(() => {
    setBrowserName(navigator.userAgent.toLowerCase());
  }, [browserName]);

useEffect를 적용하지 않으면 navigator.userAgent가 너무 많이 호출된다며 es-lint가 투덜댑니다.

(useEffect 사용법을 잘 모르지만, es-lint가 허락했으므로 맞는 것으로 간주하겠습니다.)

 

        <Input
          floatButton={browserName.indexOf('edg') < 0}
        />

해당 컴포넌트에 props로 적용했습니다.

 

이렇게 아이콘이 보이는 환경과 안보이는 환경 구성을 완료했습니다.

 

이런 경우 뿐 아니라 여러 브라우저에서 호환성 문제가 생길때 사용하면 좋은 코드인듯 합니다.