Custom Hook을 이용한 푸시 알림 설정 기능 추가

06 Nov 2023

reactjs

푸시 알림은 사용자에게 중요한 정보를 실시간으로 전달하는 데에 유용한 기능입니다. 이번 기술 블로그에서는 Custom Hook을 이용하여 웹 애플리케이션에 푸시 알림 설정 기능을 추가하는 방법을 알아보겠습니다.

Custom Hook란?

Custom Hook은 React에서 제공하는 기능으로, 재사용 가능한 로직을 만들고 컴포넌트 간에서 공유할 수 있도록 도와줍니다. Custom Hook을 사용하면 특정 기능을 추상화하고 다른 컴포넌트에서 간편하게 사용할 수 있습니다.

푸시 알림 설정 기능 추가하기

Custom Hook 생성하기

import { useState, useEffect } from 'react';

const usePushNotification = () => {
  const [pushNotifEnabled, setPushNotifEnabled] = useState(false);

  useEffect(() => {
    // 푸시 알림 설정 정보를 로컬 스토리지에서 가져오기
    const pushNotifSetting = localStorage.getItem('pushNotifEnabled');
       
    // 가져온 설정 정보가 없는 경우 기본값으로 설정
    if (pushNotifSetting === null) {
      localStorage.setItem('pushNotifEnabled', false);
    } else {
      setPushNotifEnabled(pushNotifSetting === 'true');
    }
  }, []);

  const togglePushNotif = () => {
    setPushNotifEnabled((prevEnabled) => {
      const newEnabled = !prevEnabled;

      // 푸시 알림 설정 정보를 로컬 스토리지에 저장
      localStorage.setItem('pushNotifEnabled', newEnabled);

      return newEnabled;
    });
  };

  return [pushNotifEnabled, togglePushNotif];
};

export default usePushNotification;

컴포넌트에서 Custom Hook 사용하기

import usePushNotification from './usePushNotification';

const PushNotificationSettings = () => {
  const [pushNotifEnabled, togglePushNotif] = usePushNotification();

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={pushNotifEnabled}
          onChange={togglePushNotif}
        />
        푸시 알림 설정
      </label>
    </div>
  );
};

export default PushNotificationSettings;

웹 애플리케이션에서 푸시 알림 설정 기능 사용하기

import PushNotificationSettings from './PushNotificationSettings';

const App = () => {
  return (
    <div>
      {/* 다른 컴포넌트들 */}
      <PushNotificationSettings />
      {/* 다른 컴포넌트들 */}
    </div>
  );
};

export default App;

위의 예시에서는 usePushNotification이라는 Custom Hook을 만들어 푸시 알림 설정을 관리하고, PushNotificationSettings 컴포넌트에서 해당 Custom Hook을 사용합니다. 이를 애플리케이션의 다른 부분에서도 사용할 수 있도록 구현한 것입니다.

이제 웹 애플리케이션에 푸시 알림 설정 기능을 추가할 수 있게 되었습니다. Custom Hook을 사용하면 푸시 알림 외에도 다양한 기능을 더욱 효율적으로 구현할 수 있습니다.

마무리

Custom Hook은 React에서 강력한 기능 중 하나로, 재사용 가능한 로직을 구현하고 컴포넌트 사이에서 공유할 수 있게 해줍니다. 이번 기술 블로그에서는 Custom Hook을 이용하여 푸시 알림 설정 기능을 추가하는 방법을 살펴보았습니다. 이를 통해 웹 애플리케이션에 푸시 알림 기능을 손쉽게 적용할 수 있게 되었습니다.

웹 애플리케이션 개발에 관심이 있는 분들은 React 공식 문서를 참고해보세요.
GitHub 저장소에서 관련 코드를 확인할 수 있습니다.

#React #CustomHook