Custom Hook을 활용한 소셜 미디어 공유 기능 구현

06 Nov 2023

customhook

이번 포스트에서는 React에서 Custom Hook을 활용하여 소셜 미디어 공유 기능을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React 함수 컴포넌트 안에서 state나 lifecycle 기능을 작성할 수 있게 해주는 함수입니다. 이를 통해 함수 컴포넌트에서도 클래스 컴포넌트와 같은 기능을 구현할 수 있습니다.

소셜 미디어 공유 기능 구현하기

먼저, 소셜 미디어 공유 기능을 구현하기 위해 필요한 기능은 다음과 같습니다:

현재 URL을 가져오는 기능
공유 버튼 클릭 시 소셜 미디어 창 열기 기능

이를 위해 useSocialShare라는 Custom Hook을 작성해보겠습니다.

import { useState } from 'react';

const useSocialShare = () => {
  const [url, setUrl] = useState('');

  const getCurrentUrl = () => {
    setUrl(window.location.href);
  };

  const shareOnSocialMedia = (media) => {
    if (url === '') {
      getCurrentUrl();
    }

    switch(media) {
      case 'facebook':
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
        break;
      case 'twitter':
        window.open(`https://twitter.com/intent/tweet?url=${url}`, '_blank');
        break;
      // 다른 소셜 미디어 공유 기능 추가 가능
      default:
        break;
    }
  };

  return {
    shareOnFacebook: () => shareOnSocialMedia('facebook'),
    shareOnTwitter: () => shareOnSocialMedia('twitter'),
    // 다른 소셜 미디어 공유 기능에 대한 함수 추가 가능
  };
};

export default useSocialShare;

위의 코드에서, useSocialShare Custom Hook은 getCurrentUrl 함수를 통해 현재 URL을 가져오고, shareOnSocialMedia 함수를 통해 소셜 미디어 창을 엽니다. 여기서는 Facebook과 Twitter에 대한 공유 기능만 작성되어 있지만, 다른 소셜 미디어를 추가할 수도 있습니다.

이제, useSocialShare Hook을 사용하여 컴포넌트에서 소셜 미디어 공유 기능을 구현해보겠습니다.

import React from 'react';
import useSocialShare from './useSocialShare';

const SocialShareButton = () => {
  const { shareOnFacebook, shareOnTwitter } = useSocialShare();

  return (
    <div>
      <button onClick={shareOnFacebook}>Facebook으로 공유하기</button>
      <button onClick={shareOnTwitter}>Twitter로 공유하기</button>
    </div>
  );
};

export default SocialShareButton;

위의 코드에서는 useSocialShare Hook을 사용하여 shareOnFacebook과 shareOnTwitter 함수를 가져와서 버튼의 onClick 이벤트에 연결하였습니다.

마무리

이렇게 Custom Hook을 활용하여 소셜 미디어 공유 기능을 구현해보았습니다. Custom Hook은 React에서 코드를 재사용하기 쉽게 해주기 때문에 여러 기능을 좀 더 모듈화하고 구조적으로 관리할 수 있습니다. 소셜 미디어 공유 외에도 다른 기능에도 Custom Hook을 활용하여 코드를 더욱 깔끔하고 유지보수하기 쉽게 구현할 수 있습니다.

Custom Hook이란?

소셜 미디어 공유 기능 구현하기

마무리

참고 자료