반응형
import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io.connect('http://localhost:3000');
function App() {
const [notifications, setNotifications] = useState([]);
useEffect(() => {
socket.on('display_notification', (data) => {
setNotifications([...notifications, data]);
});
}, [notifications]);
return (
<div className="App">
<button onClick={() => socket.emit('new_notification', '새로운 알림')}>알림 보내기</button>
<h2>알림 목록:</h2>
<ul>
{notifications.map((notification, index) => (
<li key={index}>{notification}</li>
))}
</ul>
</div>
);
}
export default App;
반응형
'생각 > react' 카테고리의 다른 글
React와 typescript와 next.js SSR (0) | 2023.06.16 |
---|---|
react-query useQueryErrorResetBoundary 사용 예제 (0) | 2023.06.13 |
react-query 기능 모음 (0) | 2023.06.08 |
바닐라 js vs react (JSX, Babel) && react hooks (0) | 2022.12.15 |
[주특기 과제] (1) | 2022.09.30 |