[React] 리액트 SNS 공유하기 기능 개발하기 (Web Share API란?)

Web Share API 동작 화면

 

요즘 멋있는 웹에는 위와 같은 SNS 공유 기능이 꼭 들어있는데요.

Web Share API를 사용하면 간단하게 구현할 수 있습니다.

 

웹 표준 기술인 Web Share API는

웹 애플리케이션에서 URL, 텍스트, 이미지 등을

다른 앱으로 공유할 수 있게 해줍니다.

 

기기의 네이티브 공유 인터페이스와 연동되어

별도로 개발하지 않아도 사용자의 기기에서 친숙한

UI를 제공할 수 있는 장점도 있습니다.

 

사용방법 함께 알아봅시다. 😀

 

---

📝 공식문서

https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

Web Share API - Web APIs | MDN

✔ MDN에서 Web Share API의 정보를 확인할 수 있습니다.

 

⦁ 개념

웹 사이트에서 운영체제의 공유 메커니즘을 활용하여 텍스트, 링크, 파일 및 기타 콘텐츠를

시용자가 선택한 앱에 공유할 수 있습니다.

 

⦁ 사용방법

Web Share API에는 2가지 메서드가 존재합니다.

공유를 할 수 있는지 확인하는 canShare()와, 공유하는 share()입니다.

// 사용자의 기기에서 특정 데이터를 공유할 수 있는지 여부를 확인합니다.
// 주로 파일 공유 등 지원 환경이 제한적일 경우 사용됩니다.
navigator.canShare()

// 공유 !
navigator.share()

 

⦁ 데모 보기

https://mdn.github.io/dom-examples/web-share/

Mac 크롬 브라우저 동작 화면

해당 사이트에서 코드가 적용된 예시를 확인할 수 있습니다.

Mac의 크롬브라우저에서도 잘 동작하네요.

 

⦁ 브라우저 호환성

 

브라우저 호환성이 가장 중요한 부분입니다. 개발하시기 전에 꼭 확인하세요!

조금 더 디테일한 지원 범위를 확인하고 싶다면 Caniuse 사이트를 방문해 보세요.

 

⦁ 보안 사항

1. Web Share API는 HTTPS로 제공되어야 합니다.

하지만 로컬 개발 환경에서도 사용할 수 있도록 웹 사이트가 localhost라면 잘 동작합니다.

 

2. 부정 사용을 막기 위해 사용자의 입력 동작(click 이벤트 등)에만 반응하도록 설계되어 있습니다.

 

⦁ 사용 주의사항

모든 브라우저에서 지원하는 것은 아니기 때문에,

지원하지 않는 경우에 대한 예외 처리를 꼭 추가해야 합니다.

예를들어, 클립보드에 복사한다거나 직접 만든 Modal을 띄운다 등이 있습니다. 😀

 

⦁ 소스코드

// 공유 기능
const handleShare = async link => {
  // Web Share API 지원 여부 판별
  if (!navigator.share) {
  	// 지원하지 않을 시 실행할 대안
    handleCopyClipBoard(link);
  } else {
    try {
      await navigator.share({ url: link });
    } catch (err) {
      console.error('Share failed:', err);
    }
  }
};

// 대안(클립보드 복사 등)
const handleCopyClipBoard = async link => {
  try {
    await navigator.clipboard.writeText(link);
  } catch (err) {
    console.error('Copy to clipboard failed:', err);
  }
};

 

---

 

 

---

참고 문헌 : 

https://developer.mozilla.org/ko/docs/Web/API/Navigator/share