문제

• **증상:**하나의 useEffect에서 구독 등록과 메시지 처리 로직을 함께 사용할 때, 중복된 구독 요청이 발생하고, 그에 따른 메시지 응답도 두 번씩 받아오는 문제가 발생함.

원인

• **단일 useEffect에서 두 로직 처리:**기존 코드에서는 한 useEffect에서 구독 등록과 메시지 처리를 동시에 담당하였는데, 이로 인해 의존성 배열에 포함된 값(예: isConnected, userId, subscribeToNotification 등) 변경 시 전체 로직이 다시 실행되면서 중복 구독 및 응답 문제가 발생함.
• **React 개발 모드의 Strict Mode:**개발 환경에서 React Strict Mode가 활성화되면 컴포넌트가 두 번 마운트되거나 useEffect가 두 번 호출되어, 의도치 않은 중복 실행이 발생할 수 있음.

해결 방안

• 로직 분리:
  • **구독 등록용 useEffect:**컴포넌트가 마운트될 때 단 한 번만 구독 등록을 수행하도록 하고, 필요할 경우 추가 구독을 방지하기 위해 구독 여부를 체크함.
  • **메시지 처리용 useEffect:**구독을 통해 받은 메시지를 별도의 상태(notification)로 관리하고, 이 상태가 변경될 때마다 메시지를 처리하도록 함.
• **중복 방지:**useRef를 사용해 이미 구독이 등록되었는지를 확인하여, 중복 구독을 방지함.

구현 예시

// 상태 및 참조 변수 선언
const [notification, setNotification] = useState<InviteWebSocketMessage | null>(null);
const hasSubscribed = useRef(false);

// 1. 소켓 연결 전용 useEffect
useEffect(() => {
  if (!isConnected) connectWebSocket();
}, []);

// 2. 구독 등록용 useEffect (한 번만 실행)
useEffect(() => {
  if (!isConnected || hasSubscribed.current) return;

  hasSubscribed.current = true;
  subscribeToNotification(userId, (message: InviteWebSocketMessage) => {
    console.log('Notification received:', message);
    setNotification(message);
  });
}, [isConnected]);

// 3. 메시지 처리용 useEffect (notification 상태 변경 시)
useEffect(() => {
  if (!notification) return;

  if (notification.messageType === 'INVITE_PLAYER') {
    const inviteMessage = notification;
    if (inviteMessage.payload.action === 'INVITE') {
      console.log('Invite notification received:', inviteMessage.payload);
      InviteNotificationToast({
        senderNickname: inviteMessage.payload.senderNickname,
        targetNickname: inviteMessage.payload.targetNickname,
        roomName: inviteMessage.payload.roomName,
        onAccept: () => {
          console.log('Invitation accepted:', inviteMessage.payload);
          // 서버 API 호출, 소켓 이벤트 등 처리
        },
        onDecline: () => {
          console.log('Invitation declined:', inviteMessage.payload);
          // 서버 API 호출, 소켓 이벤트 등 처리
        },
      });
    }
  }
}, [notification]);

관련 개념 보충 설명: useRef

기본 개념 및 용도

• useRef는 React 훅 중 하나로, 컴포넌트의 라이프사이클 동안 유지되어야 하는 변경 가능한 값을 저장할 수 있습니다.
• 주로 다음과 같은 상황에서 사용됩니다:
  • DOM 요소에 직접 접근할 때.
  • 렌더링 사이에 값을 저장해두고, 값 변경이 컴포넌트의 재렌더링을 유발하지 않도록 할 때.
  • 변경 여부나 플래그 (예: 구독이 이미 등록되었는지 확인하는 용도) 를 저장할 때.

이 코드에서의 useRef 용도

• **중복 구독 방지:**이 코드에서는 hasSubscribed라는 useRef 변수를 사용하여, 구독 등록 로직이 한 번만 실행되도록 합니다.
  • 초기값: false로 설정.
  • 구독 등록용 useEffect 내에서 isConnected가 true가 될 때, 먼저 hasSubscribed.current 값을 확인하여 구독이 이미 등록되었는지 판단합니다.
  • 등록되지 않은 경우에는 구독을 등록하고 hasSubscribed.current를 true로 변경하여, 이후 중복 구독을 방지합니다.

이처럼 useRef를 활용하면 렌더링과 상관없이 값이 유지되며, 중복 실행을 효과적으로 막을 수 있습니다.