[React + socket] 렌더링마다 socket.io 커넥션이 재생성되는 이슈 해결

socket을 사용할 때마다 socket 객체를 전역에 선언해서 사용해야 할 지 컴포넌트 내에 선언해서 지역적으로 사용해야 할 지 항상 고민이였다..

전역으로 사용하면 리액트에 앱에 접속 시, 바로 소켓에 커넥션되기 때문에 너무 불편했다

그렇다고 지역적으로 사용하려니까 커넥션이 렌더링될 때마다 생성되길래 렌더링이 자주 일어나는 서비스일 경우 부하가 심할 것이고, 실제로 WebRTC 화상 회의 구현을 하면서 엄청난 렉과 마주했다..

 

아래는 내가 처음에 적용했던 소켓 코드다.

function App() {
  const socket = io(env.SERVER_PATH + `namespace`);

  return (
    <div>
    // 어쩌고
    </div>
  );
}

export default App;

App 컴포넌트가 렌더링될 때마다 소켓 객체가 생성될 것이다.. 내가 만들고 있는 실시간 성 서비스에서는 매우 치명적이였다

그래서 내린 결론 useMemo를 사용하기!

function App() {
  const socket = useMemo(() => io(env.SERVER_PATH + `namespace`), []);

  return (
    <div>
    // 어쩌고
    </div>
  );
}

export default App;

소켓 객체를 메모이제이션 해주어서 소켓이 재생성되지 않는다

 

+ 추가로, socket을 선언 후 하위 컴포넌트에 props로 깊은 depth로 넘겨야 된다면 props drilling이 야기되고, 어디서 선언된 소켓인지 헷갈릴 수 있다
이럴 경우 소켓을 전역 상태로 관리하여 사용하는 방법도 좋다고 생각한다.