🤲 React 폴링(Polling) 하는 방법

📍 Polling이란 ?

• 클라이언트 쪽에서 n초 간격으로 계속해서 HTTP 요청을 보내는 것을 의미합니다.

🔸 장점

• 구현이 쉽습니다.

🔸 단점

• HTTP는 단반향 통신이라 이 프로토콜이 계속해서 요청을 날리면 서버의 부담이 증가하게 됩니다.

🔸 사용법

• Polling을 작업을 위해 setInterval을 사용하여 데이터 요청을 할 수 있습니다.

// API 데이터 호출 함수
const dataApi = async () => {
  const rankApi = await fetcher(METHOD.GET, `/domestic/rank`);
        setRankList(rankApi.data);
};

 useEffect(() => {
        let polling = setInterval(() => {
            dataApi();
        }, 60000);

        // 페이지에 벗어날 경우 polling X
        return () => {
            clearInterval(polling);
        };
    }, []);

이런식으로 setInterval 을 사용하여 주기 시간을 넣고 (60000 = 1분) 1분에 한 번씩 API를 새롭게 call 시킴으로써 실시간으로 변동되는 데이터를 화면에서 볼 수 있습니다.

useEffect를 사용해서 페이지가 벗어날 때 willdidMount 와 같은 역할인 useEffect의 return 문 안에 clearInterval을 해줍니다.

---

또 다른 방식으로는 웹소켓을 사용해 볼 수 있습니다. 웹소켓은 클라이언트와 서버 사이의 양방향 통신을 의미합니다.