[react-device-detect] 각 디바이스마다 맞는 스토어 이동기능 구현하기

회사에서 랜딩페이지를 작업하면서 react-device-detect를 사용한 경험에 대해서 정리해보려 한다.

 

만들어야 되는 기능

---

웹에서는 안드로이드 다운로드, ios 다운로드 버튼이 각각 있다.

모바일에서는 다운로드 하나만 있는데,

안드로이드에서 클릭하면 구글플레이스토어로 들어가고

ios에서 클릭하면 앱스토어로 들어가야 된다.

 

웹에서는 둘 다 만들면 되니까 별상관이 없는데 모바일에서는 디바이스가 무엇인가에 따라 처리해야 하니 난감하다는 생각이 들었다.

그래도 구원해 줄 라이브러리는 언제나 존재한다.

바로 react-device-detect이다.

https://www.npmjs.com/package/react-device-detect

react-device-detect

이 라이브러리에는 모바일인지 아닌지 판단부터, 안드로이드인지, ios인지 판단해 주는 아주 좋은 라이브러리이다.

 

해결방안

---

import { isAndroid, isIOS, isMobile } from "react-device-detect";

const downloadMobile = () => {
    if (isAndroid) {
        location.href = "구글플레이스토어 해당 앱 링크";
    } else if (isIOS) {
        location.href = "앱스토어 해당 앱 링크";
    } else {
        // android
        location.href = "구글플레이스토어 해당 앱 링크";
    }
};

return(
	{/* 앱 다운로드 링크 */}
    <div className="download-link">
        <div className="download-link-wrap">
            <div className="pc">
                <a href="구글플레이스토어 해당 앱 링크">
                    <span>Google Play</span>
                </a>
                <a href="앱스토어 해당 앱 링크">
                    <span>App Store</span>
                </a>
            </div>
        </div>

        {/* 모바일 다운로드 링크 */}
        <a className="mobile" onClick={downloadMobile}>
            <span>다운로드</span>
        </a>
    </div>
);