소켓 서버가 따로 없으니 완전 실시간 통신은 어렵다. 주기적으로 refetch하여 실시간 통신을 모방하고, 나아가 이를 더 편하고 안정적, 효율적으로 구현하기 위해 swr 도입을 고려.
알림이랑 채팅 쪽에서 주로 사용될 것 같습니다.
swr은 next를 제작한 vercel에서 만들었고 TypeScript에 친화적입니다.
SWR 사용법
설치 먼저 합니다.
npm install swr알림import axios from 'axios'; import { useEffect, useState } from 'react'; import useSWR from 'swr'; const SWR = () => { const [notifications, setNotifications] = useState([]); const fetcher = async (url: string) => { // 요건 apis 폴더에 작성해서 가지고 오면 될 듯요! return await axios.get(url, { headers: { Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmNmMGQ0ZjU5NmM2NWY5ZWUyZjIyNiIsImVtYWlsIjoiYWxvaGFqdW5lMjJAZ21haWwuY29tIn0sImlhdCI6MTY3MzU4NzA5NX0.Jv3NmvJvaMSHPPvX34dgp1EATwN7ls356x2_pouDTaM`, }, }); }; const { data: response, error, isLoading, // 처음 인자로는 api url, 두 번째 인자는 네트워크 요청 함수, 세 번째 인자는 옵션 } = useSWR(`${import.meta.env.VITE_API_URL}/notifications`, fetcher, { // 0.5초마다 refetch refreshInterval: 500, }); useEffect(() => { if (response) { const { data: fetchedNotifications } = response; setNotifications(fetchedNotifications); } }, [response]); return ( <ul> {notifications.map((notification) => ( <li key={notification._id}>{notification._id}</li> ))} </ul> ); }; export default SWR;
대강 이렇게 쓰면 될 것 같습니다.
위에서 url은 사실상 저희에게 필요가 없는데, 첫 번째 인자를 null이나 ‘’과 같이 빈 문자열로 하면 제대로 동작하지 않네요…
main.tsximport React from 'react'; import ReactDOM from 'react-dom/client'; import { SWRConfig } from 'swr'; import App from './App'; import GlobalStyle from './styles/GlobalStyle'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( <React.StrictMode> <GlobalStyle /> <SWRConfig value={{ refreshInterval: 500, }}> <App /> </SWRConfig> </React.StrictMode> );
위와 같이 전역으로 옵션들을 설정할 수 있는 SWRConfig 컴포넌트를 제공해주는데 이걸 활용하면 useSWR 훅을 사용할 때 더 간결하게 작성할 수 있을 것 같아요. 이렇게 해주면 이제 useSWR에서 refreshInterval 옵션을 설정해주지 않아도 되겠네요.
React Query와의 비교
보통 swr은 React Query랑 많이 비교되네요.
- 다운로드 수는 React Query가 많습니다. 둘 다 우상향.
- 반면 용량은 swr이 3 ~ 5배 가볍습니다.
- 둘 다 캐싱 제공
- 둘 다 주기적으로 refetch 가능
- swr은 Dev Tool을 위해 서드 파티 라이브러리를 따로 다운할 필요가 있으나 React Query는 그 자체 패키지에서 공식적으로 지원
- React Query는 가비지 컬렉션 제공
아티클들의 의견으로는 간단한 솔루션을 원한다면 swr을, 더 많은 기능과 커스텀을 원하면 React Query를 이용한다고 합니다.
