React에서 서버 푸시 알림 구현하기

 

웹 애플리케이션의 사용자 경험을 향상시키는 방법 중 하나는 실시간 서버 푸시 알림 기능을 구현하는 것입니다. React를 사용하여 이러한 서버 푸시 알림을 구축하면, 사용자와의 상호작용을 더욱 강화하고 중요한 정보를 신속하게 전달할 수 있습니다. 이 글에서는 React 애플리케이션에서 서버 푸시 알림을 구현하는 방법을 단계별로 설명하고, 실용적인 예제를 통해 이해를 돕겠습니다.

---

1. 서버 푸시 알림이란?

서버 푸시 알림은 서버에서 클라이언트(사용자의 브라우저 또는 애플리케이션)로 데이터를 능동적으로 전달하는 기술입니다. 주로 실시간 업데이트가 필요한 경우에 사용됩니다. 대표적인 활용 사례는 다음과 같습니다:

• 메시지 알림 (채팅 애플리케이션)
• 이벤트 알림 (실시간 스포츠 점수, 뉴스 속보)
• 상태 변경 알림 (주문 상태 업데이트)

React에서는 서버 푸시 알림을 구현하기 위해 WebSocket, Server-Sent Events(SSE), 또는 Push API 같은 기술을 활용할 수 있습니다.

---

2. 구현 기술 선택

React 애플리케이션에서 서버 푸시 알림을 구현하는 기술에는 다음과 같은 옵션이 있습니다:

2.1 WebSocket

WebSocket은 클라이언트와 서버 간 양방향 통신을 지원하는 프로토콜입니다. 연결이 유지되는 동안 클라이언트와 서버 간의 실시간 데이터 전송이 가능합니다.

2.2 Server-Sent Events (SSE)

SSE는 서버에서 클라이언트로 데이터를 푸시하는 단방향 통신 방식입니다. 브라우저가 자동으로 연결을 재설정해주는 등 간단한 구현이 가능하지만, 양방향 통신이 필요하다면 적합하지 않습니다.

2.3 Push API

Push API는 브라우저 푸시 알림을 지원합니다. 푸시 서비스와 브라우저 간의 통신을 관리하며, 푸시 메시지를 사용자에게 직접 전송할 수 있습니다. 이 방식은 사용자 권한이 필요합니다.

---

3. React에서 WebSocket을 사용한 서버 푸시 알림 구현하기

3.1 프로젝트 설정

우선 React 프로젝트를 생성하거나 기존 프로젝트를 준비합니다:

npx create-react-app react-push-notifications
cd react-push-notifications

필요한 라이브러리를 설치합니다. 예를 들어, WebSocket 연결 관리를 위한 socket.io-client를 설치할 수 있습니다:

npm install socket.io-client

3.2 서버 설정

서버는 Node.js와 socket.io를 사용해 간단한 WebSocket 서버를 구축합니다:

// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log('사용자가 연결되었습니다.');

  // 클라이언트로 메시지 전송
  setInterval(() => {
    socket.emit('notification', { message: '새로운 알림이 도착했습니다!' });
  }, 5000);

  socket.on('disconnect', () => {
    console.log('사용자가 연결을 종료했습니다.');
  });
});

server.listen(3001, () => {
  console.log('서버가 3001 포트에서 실행 중입니다.');
});

3.3 클라이언트 설정

React 클라이언트에서 socket.io-client를 사용하여 서버와 연결합니다:

// App.js
import React, { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

const socket = io('http://localhost:3001');

function App() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // 서버에서 알림 수신
    socket.on('notification', (data) => {
      setNotifications((prev) => [...prev, data.message]);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  return (
    <div>
      <h1>푸시 알림</h1>
      <ul>
        {notifications.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

4. Server-Sent Events (SSE) 예제

SSE를 활용한 간단한 예제도 소개합니다:

4.1 서버 설정

// server.js
const express = require('express');
const app = express();

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: '새로운 알림!' })}\n\n`);
  }, 5000);
});

app.listen(3001, () => {
  console.log('SSE 서버가 3001 포트에서 실행 중입니다.');
});

4.2 클라이언트 설정

// App.js
import React, { useEffect, useState } from 'react';

function App() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('http://localhost:3001/events');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setNotifications((prev) => [...prev, data.message]);
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <h1>푸시 알림 (SSE)</h1>
      <ul>
        {notifications.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

5. 결론

React에서 서버 푸시 알림을 구현하면 사용자 경험을 크게 향상시킬 수 있습니다. WebSocket과 SSE는 각각의 장단점이 있으므로 애플리케이션의 요구 사항에 맞는 기술을 선택하세요. 이 글에서 소개한 예제를 시작점으로 삼아 실시간 알림 기능을 추가해보세요. 실시간 데이터 처리와 사용자 상호작용이 한층 더 강화된 애플리케이션을 구축할 수 있을 것입니다.