📡 65. React Native에서 WebSocket 사용해 실시간 데이터 처리하기

---

실시간 데이터는 채팅, 알림, 게임, 라이브 업데이트 등에서 핵심이다.
React Native에서 WebSocket을 통해 실시간으로 데이터를 주고받는
기본 구조와 예제를 정리해봤다. 🚀

---

🔌 1. WebSocket이란?

• HTTP처럼 요청/응답 방식이 아니라,
  양방향 통신이 가능한 지속 연결 프로토콜
• 서버와 클라이언트가 실시간으로 메시지를 주고받을 수 있음
• 채팅, 알림, 실시간 주가/날씨 정보 등에 활용

---

⚙️ 2. 기본 WebSocket 연결 예제

import React, { useEffect, useRef } from 'react';
import { Text } from 'react-native';

export default function WebSocketExample() {
  const socketRef = useRef<WebSocket | null>(null);

  useEffect(() => {
    socketRef.current = new WebSocket('wss://echo.websocket.org');

    socketRef.current.onopen = () => {
      console.log('✅ WebSocket 연결됨');
      socketRef.current?.send('Hello Server!');
    };

    socketRef.current.onmessage = (event) => {
      console.log('📩 받은 메시지:', event.data);
    };

    socketRef.current.onerror = (error) => {
      console.log('❌ 에러 발생:', error);
    };

    socketRef.current.onclose = () => {
      console.log('🔌 연결 종료됨');
    };

    return () => {
      socketRef.current?.close();
    };
  }, []);

  return <Text>WebSocket 연결 예제</Text>;
}

---

🔄 3. 커스텀 훅으로 관리하면 편하다

import { useEffect, useRef } from 'react';

export const useWebSocket = (url: string) => {
  const socketRef = useRef<WebSocket | null>(null);

  useEffect(() => {
    socketRef.current = new WebSocket(url);

    socketRef.current.onopen = () => {
      console.log('🔌 WebSocket 연결');
    };

    return () => {
      socketRef.current?.close();
    };
  }, [url]);

  const sendMessage = (msg: string) => {
    socketRef.current?.send(msg);
  };

  return { sendMessage };
};

---

📱 4. 실전 활용 예: 채팅방

• Socket.io-client를 사용하는 경우도 많지만,
• 기본 WebSocket만으로도 구현 가능

npm install socket.io-client

import io from 'socket.io-client';

const socket = io('https://your-chat-server.com');

socket.on('connect', () => {
  console.log('✅ 연결됨');
});

socket.on('chat', (msg) => {
  console.log('🗨️ 채팅 메시지:', msg);
});

---

⚠️ 5. 실시간 통신 시 주의사항

항목	내용
연결 유지	백그라운드 상태에서도 유지 필요 여부 확인
reconnect	끊김 시 자동 재연결 로직 필수
보안	인증 토큰과 함께 연결하거나 SSL 사용 권장
에러 처리	onerror, onclose 처리 필수

---

🔍 요약 정리

항목	설명
WebSocket	양방향, 실시간 통신에 적합
React Native	기본 WebSocket 또는 Socket.io 사용
구조화	커스텀 훅으로 추상화 추천
실전 적용	채팅, 알림, 주가 등 다양하게 활용 가능

---

📡 실시간 데이터 흐름은 사용자 경험을 한 단계 업그레이드한다.
WebSocket을 통해 앱에 즉각적인 반응성을 더해보자!

---