React + Socket io

[고은찬]

현재 강의를 다 듣고 리액트로 다른 서비스를 만들고 있는데요 채팅 기능이 들어갑니다.

소켓 io를 사용해 연결중인데 연결하는 과정에서 socket.connect(서버url) 부분을 어디에 선언해야 할지 잘 모르겠습니다.

일단 소켓은 채팅페이지에 들어가야 연결되야 하고 나머지 다른 페이지들 (메인페이지, 로그인 페이지 등)에서는 연결시키지면 안되는데

1. 컴포넌트 밖에다 선언

import React,{useState, useEffect} from 'react'; 

..

import socketio from 'socket.io-client';

const socket = socketio.connect('https://abc.com');

function Chatting () { //컴포넌트

socket 사용...

}

 

위 방식으로 선언하니 다른 페이지에서도 connect가 실행되는 문제가 발생하고

 

 

2. 컴포넌트 안에다 선언

import React,{useState, useEffect} from 'react'; 

..

import socketio from 'socket.io-client';

...

function Chatting () { //컴포넌트

const socket = socketio.connect('https://abc.com');

socket 사용...

}

위 방법으로 선언하니 페이지가 랜더링 할때마다 connect 한 소켓 객체가 랜더링 횟수만큼 생성이되는 문제가 있었습니다.

 

어디에 선언해야 다른페이지가 아닌 채팅 페이지에 들어왔을 때 connect 되면서 재랜더링할때 또 conncet를 시키지 않을 수 있을까요?

[codingapple]

컴포넌트 장착시에만 한번 실행되는 useEffect 안에 넣거나 

App.js의 import 많은 곳 밑에 바로 넣어봅시다 

[고은찬]

그런데 

1. useEffect  안에 의존성배열 []을 붙혀 실행시킬 때 

1 )

useEffect ( ()=> {

const socket = socketio.connect('https://abc.com'); 

},[])

이렇게 하게 되면 이 socket을 전역으로 사용할 수가 없고

 

2) 전역으로 사용하려고 

let socket 

useEffect ( ()=> {

socket = socketio.connect('https://abc.com'); 

},[])

을 하게 되면 컴포넌트 재랜더링 시 socket의 값이 undefined 됩니다 

 

 

2. import부분에서 선언하면 소켓 연결은 되는데 

다른 컴포넌트에 접속해도 실행되어 메인페이지나, 다른페이지에서도 원치않는 연결이 되는 문제가 있습니다 ㅠㅠ 

 

 

[codingapple]

전역으로 써야하면 2번으로 해야할듯요

필요할 때마다 socket.disconnect() 이런거 써서 연결을 강제로 끊고

필요하면 다시 연결하고 그러면 될듯요 

 

[글쓴이]

글