React Academy · 강의

재연결, 오류 처리와 정리

연결 끊김을 안정적으로 처리하고 useEffect에서 소켓 수신기를 정리합니다.

재연결, 오류 처리와 정리은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

재연결이 중요한 이유

모바일에서는 네트워크 중단이 흔합니다. 재연결 로직이 없으면 사용자는 실시간 연결을 조용히 잃게 됩니다. 좋은 전략은 백오프를 적용하여 자동으로 재시도하는 것입니다.

Socket.IO 자동 재연결

Socket.IO는 기본적으로 자동으로 다시 연결합니다. io() 옵션에서 reconnectionAttempts, reconnectionDelay, reconnectionDelayMax를 구성하십시오.

const socket = io('https://api.example.com', {
  reconnectionAttempts: 5,
  reconnectionDelay: 1000,       // initial delay
  reconnectionDelayMax: 10000,   // max delay (exponential backoff)
  randomizationFactor: 0.5,
});

React에서 연결 상태 추적

connect, disconnect, connect_error 이벤트를 수신하고 컴포넌트 상태에 상태를 반영하십시오.

function useConnectionStatus() {
  const [status, setStatus] = useState<'connected' | 'disconnected' | 'error'>(
    socket.connected ? 'connected' : 'disconnected'
  );

  useEffect(() => {
    socket.on('connect', () => setStatus('connected'));
    socket.on('disconnect', () => setStatus('disconnected'));
    socket.on('connect_error', () => setStatus('error'));
    return () => {
      socket.off('connect');
      socket.off('disconnect');
      socket.off('connect_error');
    };
  }, []);

  return status;
}

재연결 배너 표시

소켓 연결이 끊어질 때 배너를 표시하여 사용자가 오프라인 상태이고 재연결이 진행 중임을 알 수 있게 하십시오.

function ConnectionBanner() {
  const status = useConnectionStatus();
  if (status === 'connected') return null;
  return (
    <div className="banner warning">
      {status === 'error' ? 'Connection failed' : 'Reconnecting...'}
    </div>
  );
}

수동 재연결

재시도를 모두 소진한 후 사용자가 button을 통해 수동으로 다시 연결하도록 하십시오.

const [failed, setFailed] = useState(false);

socket.on('reconnect_failed', () => setFailed(true));

if (failed) {
  return (
    <button onClick={() => { setFailed(false); socket.connect(); }}>
      Retry connection
    </button>
  );
}

원시 WebSocket 재연결

원시 WebSocket에는 기본 제공 재연결 기능이 없습니다. 지수 백오프를 수동으로 구현하십시오. 닫힐 때 새 연결을 시도하기 전에 Math.min(delay * 2, maxDelay)만큼 기다리십시오.

function connectWithBackoff(url, attempt = 0) {
  const ws = new WebSocket(url);
  ws.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt, 30000);
    setTimeout(() => connectWithBackoff(url, attempt + 1), delay);
  };
  return ws;
}

useEffect에서 정리하기

useEffect에서 추가한 모든 소켓 수신기는 정리 함수에서 제거해야 합니다. 이를 수행하지 않으면 메모리 누수와 중복 이벤트 처리가 발생합니다.

useEffect(() => {
  const onData = (d) => setState(d);
  socket.on('data', onData);

  return () => {
    socket.off('data', onData); // remove specific handler reference
  };
}, []);

처리기의 오래된 클로저 방지

소켓 처리기가 상태나 속성을 참조하면 오래된 클로저를 캡처하게 됩니다. 항상 최신 값에 접근하려면 ref를 사용하십시오.

const handlerRef = useRef(null);
handlerRef.current = (msg) => updateMessages(messages, msg); // fresh ref each render

useEffect(() => {
  const onMsg = (...args) => handlerRef.current(...args);
  socket.on('message', onMsg);
  return () => socket.off('message', onMsg);
}, []); // no deps needed

재연결 시 대기 중인 메시지 전송

연결이 끊긴 동안 발신 메시지를 대기열에 저장하고 연결이 다시 설정되면 대기열의 메시지를 전송하십시오.

const queue = useRef<string[]>([]);

socket.on('connect', () => {
  while (queue.current.length) {
    socket.emit('message', queue.current.shift());
  }
});

function send(text: string) {
  if (socket.connected) socket.emit('message', text);
  else queue.current.push(text);
}

재연결 후 방에 다시 참여하기

Socket.IO는 연결이 끊어지면 방 참여 상태를 지웁니다. 구독을 복원하려면 소켓이 다시 연결될 때 방에 다시 참여하십시오.

useEffect(() => {
  function rejoin() { socket.emit('join-room', roomId); }
  socket.on('connect', rejoin);
  return () => socket.off('connect', rejoin);
}, [roomId]);

전역 오류 처리

복구할 수 없는 오류를 적절히 처리하십시오. 오류 UI를 표시하고 최후의 수단으로 페이지 새로 고침을 제공하십시오.

socket.on('connect_error', (err) => {
  console.error('Socket error:', err.message);
  // Show user-friendly error
});

빠른 확인

useEffect 정리 과정에서 소켓 이벤트 수신기를 제거하지 않을 때의 위험은 무엇입니까?

복습

백오프 옵션으로 Socket.IO 재연결을 구성하십시오. React 상태에 연결 상태를 반영하고, 재연결 배너를 표시하며, 재연결 후 방에 다시 참여하고, useEffect 정리 과정에서 항상 수신기를 제거하십시오. 오프라인 동안 대기 중인 메시지를 대기열에 저장하고 재연결 시 전송하십시오.

자주 묻는 질문

“재연결, 오류 처리와 정리” 강의는 무료인가요?

네 — “재연결, 오류 처리와 정리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“재연결, 오류 처리와 정리”에서 뭘 배우나요?

연결 끊김을 안정적으로 처리하고 useEffect에서 소켓 수신기를 정리합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“재연결, 오류 처리와 정리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기