socket 연결

client/src/Components/Chat.js

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Form, Button, Row } from 'react-bootstrap';
+import axios from "axios";
 
 
 function Chat(props) {
+  const [username, setUsername] = useState('')
+
   function handleChange(e) {
     e.preventDefault()
     props.setInner(e.target.value)
@@ -13,6 +16,15 @@ function Chat(props) {
     props.sendMsg(e)
   }
 
+  async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
+    const userid = localStorage.getItem('user')
+    const response = await axios.post(`/users/${userid}`, { 'email': userid })
+    setUsername(response.data.username)
+  }
+  useEffect(() => {
+    getLoginedUser()
+    console.log('Chat에서 useEffect', username)
+  })
   return (
 
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
@@ -20,7 +32,7 @@ function Chat(props) {
       <h2>현재 {props.roomName} 입니다.</h2>
       {      props.chatmsg.map((value, index) => (
         <Row key={index} className='ml-3'>
-          {props.roomName}에서 보낸 메세지 : {value}
+          {props.roomName}에서 {username}님이 보낸 메세지 : {value} 
         </Row>
       ))}