문제상황

• 하나의 웹소켓을 사용하고 있는데, 여러 웹소켓이 연결되는 문제가 발생함.

local에서 확인한 모습

의심 상황

• <React.StrictMode> 때문인가?
• socket의 연결 주기를 길게 줘서 해결할 수 있을까?
• socket을 useRef로 다루고 있는 과정에서 생긴 문제일까?

local에서 확인한 모습

• <React.StrictMode> off한 후 상황

  

  • 연결되는 소켓이 절반으로 줄어듬.

• 웹소켓 인스턴스를 생성하는 곳에서 console을 찍어서 일어나는 일을 추적함.

  

  • 소켓 인스턴스를 만들고, 연결된 후에 소켓 인스턴스가 4번이나 더 생성되는 일이 일어남.

• SocketProvider에서 socket 인스턴스를 만들고 socket을 사용할 수 있게함.

  • SocketProvider을 사용하는 곳 위에 console.log 추가하고
  • SocketProvider 내에서 socket 인스턴스 생성하는 곳에서 console.log 추가함

  console.log('SocketProvider를 사용하는 곳');
  const { socket, isConnected } = useContext(SocketContext);
  

  • useCompetition

  ...
  console.log('소켓 인스턴스 생성');
  const socket = useRef(
    createSocketInstance('/competitions', {
      transports: ['websocket'],
      query: { competitionId },
      auth: {
        token: `Bearer ${localStorage.getItem('accessToken')}`,
      },
      reconnectionDelay: 3000,
    }),
  );
  ...
  

• 렌더링 되면서, 인스턴스 생성을 반복하는 것을 확인함.

  • useCompetition ⇒ SocketProvider로 변경됨.
  • 렌더링 되면서, 인스턴스 생성을 반복하는 것을 확인함.
  • 소켓 잘못이 아닌가 ??

  

• 해당 페이지에 콘솔을 찍고 렌더링이 몇 번 일어나는 지 확인함

  

• 정확히 5번 일어나는 것을 확인해 소켓 문제가 아니라 렌더링이 여러번 일어나면서 일어난 결과라고 판단함

해결 방안

• 복잡한 페이지에서 fetch로 관리하는 state가 많아서 어쩔 수 없다고 판단함.
  • socket을 싱글톤 패턴을 적용해서 반복적으로 인스턴스화하지 않도록 구현하자