import React, { useState, useEffect } from 'react'; import { Row, Col, Modal, Button, Navbar, Nav } from 'react-bootstrap'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; import ClosedList from '../Components/ClosedList'; import OpenList from '../Components/OpenList'; import Chat from '../Components/Chat'; import Menu from '../Components/Menu'; import { io } from "socket.io-client"; //모듈 가져오기 // const userName = "정연우"; const socket = io(); function Home() { const [show, setShow] = useState(false); const [chat, setChat] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); const handleChato = () => setChat(true); const handleChatc = () => setChat(false); const [inner, setInner] = useState(['']) //인풋값 const [chatmsg, setChatmsg] = useState([inner]) // 전송된 채팅들 저장하는 배열 const [roomName, setRoomName] = useState('dd') //방 선택이 방1을 눌럿다 방2를 누르면 전체로 전송됨 function enterChatroom(roomName) { //방 입장하기 socket.emit('joinRoom', roomName) console.log(`joinRoom : ${roomName} 입장`) } const sendMsg = (e) => { e.preventDefault() console.log('sendMsg', inner) console.log(roomName) socket.emit("chat", { roomName: roomName, msg: inner }); } function clearChat() { setChatmsg([]) } useEffect(() => { socket.on('broadcast', (msg) => { console.log('msg', msg) console.log('inner :', inner) setChatmsg([...chatmsg, msg]) console.log('useeffect2', chatmsg) }) console.log('useeffect2', chatmsg) }, [chatmsg]) return ( <> {chat ? : null} 방 생성 여기에 form 입력 ); } export default Home;