프론트단에서 socket.io가 안되요

[강현우]

프론트->서버로 메세지 전송 되는건 했는데 서버에서 보내는 메세지를 프론트단에서 받지를 못하고 아무것도 나오지 않습니다

[codingapple]

소켓연결하는코드나 이벤트리스너는 useEffect안에 적어봅시다

[강현우]

const Send = ()=>{
useEffect(()=>{
socket.emit('user-send',msg)
setData(datas.concat(msg))
socket.on('broadcast',function(data){
setData(datas.concat(data))
 })
console.log(datas)
 })
 }

return (
<>
<div>채팅방</div>
<input onChange={(e)=>{
setMsg(e.target.value)
 }}></input>
 
<button onClick={Send}>서버에 메시지 보내기</button>


이런식으로 작성해보았는데 Minified React error #321; 이런 에러가 나오네요

[강현우]

import {Nav, Navbar, Container,Row,Col} from 'react-bootstrap';
import { useParams,useNavigate } from "react-router-dom";
import {Button} from 'react-bootstrap';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { io } from "socket.io-client";

function Lectures(){
var socket = io()
let [msg,setMsg] = useState()
let [datas,setData] = useState([])

useEffect(()=>{
socket.on('broadcast',function(data){
setData(datas.concat(data))
 })
console.log(datas)
 },[datas])

return (
<>
<div>채팅방</div>
<input onChange={(e)=>{
setMsg(e.target.value)
 }}></input>
 
<button onClick={()=>{
socket.emit('user-send',msg)
 }}>서버에 메시지 보내기</button>
 
<div className='container'>
{
datas.map((a,i)=>{
<Chat datas={datas[i]}/>
 })
}
</div>
</>
 )
}

const Chat = ({datas})=>{
return (
<div>
<h3>{datas}</h3>
</div>
 )
}
export default Lectures

이런식으로 수정하였습니다. 차례대로 창을 번갈아 가며 눌렀을때 콘솔 창에 찍어보면 값이 잘 들어가다가 갑자기 바뀌고 그럽니다.

[codingapple]

var socket = io()랑 socket.on 은 로드시 1회실행되는 useEffect안에 적어봅시다 

[강현우]

import {Nav, Navbar, Container,Row,Col} from 'react-bootstrap';
import { useParams,useNavigate } from "react-router-dom";
import {Button} from 'react-bootstrap';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { io } from "socket.io-client";

const socket = io()

function Lectures(){
let [msg,setMsg] = useState()
let [datas,setData] = useState([])
 
useEffect(()=>{
socket.on('broadcast',function(data){
console.log("이펙트:"+datas)
setData([...datas,data])
 })
 },[])
 
return (
<>
<div>채팅방</div>
<input onChange={(e)=>{
setMsg(e.target.value)
 }}></input>
 
<button onClick={()=>{
socket.emit('user-send',msg)
 }}>서버에 메시지 보내기</button>
 
<div className='container'>
{
console.log(datas)
}
</div>
</>
 )
}

export default Lectures

이런식으로 수정해보았습니다. 다만 채팅기록이 남는것처럼 하려고 datas를 map함수를 이용하려했으나 첫번째 줄만 계속 바뀌어서 콘솔창을 확인해보니 
['1'] ['2'] 이런식으로 concat으로 추가되는 값이 뒤에 쭉 이어지지않고 하나씩만 바뀌고 있습니다.

[강현우]

아 해결하였습니다. useEffect에서 [] 빼니깐 되네요. 혹시 이게 빠져서 잘 동작하는 이유 한번만 설명해주실수 있으실까요?

[codingapple]

[] 안쓰면 state 변경할 때 마다 계속 이벤트리스너 부착되어서 넣는게 맞을거같긴한데 잘되면 상관없을듯요

[글쓴이]

글