Custom Hook을 활용한 푸시 알림 구현하기

06 Nov 2023

customhook

푸시 알림은 사용자에게 중요한 정보를 전달하는 데에 널리 사용되는 기능입니다. 이번 기술 블로그에서는 Custom Hook을 활용하여 간단한 푸시 알림 구현 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 로직을 재사용하기 위해 사용되는 기능입니다. Custom Hook은 보통 “use”라는 접두사로 시작하며, React의 내장 Hook과 마찬가지로 함수 컴포넌트 내에서 사용됩니다. Custom Hook을 사용하여 특정 기능을 모듈화하고, 여러 컴포넌트에서 유연하게 재사용할 수 있습니다.

푸시 알림을 위한 Custom Hook 구현하기

아래는 Custom Hook을 사용하여 간단한 푸시 알림 기능을 구현하는 코드의 예시입니다.

import { useEffect, useState } from 'react';

const usePushNotification = (initialMessage) => {
  const [message, setMessage] = useState(initialMessage);

  useEffect(() => {
    // 푸시 알림을 수신하는 로직
    const pushNotificationListener = () => {
      // 새로운 푸시 알림이 도착할 때마다 실행되는 로직
      setMessage("새로운 알림이 도착했습니다!");
    };

    // 푸시 알림 수신 이벤트 리스너 등록
    // 예시로는 빈 배열을 전달하여 컴포넌트가 처음 렌더링될 때만 실행되도록 설정했습니다.
    // 실제 알림 이벤트를 수신할 수 있는 방법은 서버와의 통신 등을 활용해야 합니다.
    window.addEventListener('push-notification', pushNotificationListener);

    return () => {
      // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
      window.removeEventListener('push-notification', pushNotificationListener);
    };
  }, []);

  return message;
};

export default usePushNotification;

위의 코드는 usePushNotification라는 Custom Hook을 구현한 예시입니다. 이 Hook은 초기 메시지를 인자로 받아서 상태를 관리하고, 푸시 알림 수신 이벤트를 리스닝하여 새로운 알림이 도착할 때마다 메시지를 업데이트하는 기능을 제공합니다.

사용 예시:

import usePushNotification from './usePushNotification';

function App() {
  const notificationMessage = usePushNotification("앱이 시작되었습니다!");

  return (
    <div>
      <h1>푸시 알림 예제</h1>
      <p>{notificationMessage}</p>
    </div>
  );
}

export default App;

위 예시에서는 usePushNotification Hook을 사용하여 notificationMessage라는 상태를 가져옵니다. 이 상태는 앱 안에서 새로운 푸시 알림 메시지가 업데이트됩니다. 이 메시지는 JSX 코드에서 출력되어 사용자에게 푸시 알림을 보여줄 수 있습니다.

결론

Custom Hook을 사용하여 푸시 알림 기능을 구현하는 방법에 대해 알아보았습니다. Custom Hook은 React에서 로직을 재사용하기 위한 강력한 도구로, 코드의 가독성과 유지보수성을 높일 수 있습니다. 푸시 알림 외에도 다양한 기능을 Custom Hook으로 구현하여 개발 효율성을 향상시킬 수 있습니다.