폴링 (polling) 이란? + React 에서 폴링 구현하는 법

[woohm402]

위키백과 에서 폴링의 정의를 찾아보면 다음과 같습니다.

폴링(polling)이란 하나의 장치(또는 프로그램)가 충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식을 말한다.

주기적으로 검사하겠다는 겁니다.

폴링의 필요성

서버와 잘 동기화된 사이트를 만들고 싶다고 가정하겠습니다. 서버와 프론트에 있는 데이터가 동기화되었다고 생각할 수 있는 - 가령 채팅처럼요. DB에 어떤 변경사항이 생길 경우 그걸 프론트가 자동으로 반영했으면 좋겠어요! 어떻게 하면 될까요? 지금 우리가 사용하는 방법대로면 새로고침을 하면 서버와 동기가 맞춰지긴 합니다만, 사용자들이 원하는 건 그런 게 아닙니다. 자기 혼자서 자동으로 싱크가 맞춰져야죠!

아쉽게도 완벽하게 하는 건 쉽지 않습니다. http에서는 서버가 클라이언트에게 요청을 보내지 않는 게 원칙이기 때문입니다. (채팅 구현 등에 사용되는 websocket api라면 말이 다르긴 합니다만.. 그건 아주아주 어려우니 나중에 생각합시다)

이때 폴링을 사용할 수 있습니다. 서버에 n초마다 주기적으로 요청을 보내면 완벽하진 않아도 대충 싱크가 맞도록 만들 수 있겠죠? 아주 간단한 로직이네요!

아무튼 그래서 가장 단순해서 프론트엔드에서 폴링을 자주 채택합니다. 폴링 말고도 방법은 많아요. 웹훅을 쓸 수도 있을 거고.. 아무튼 우리는 제일 간단하고 공부하기 좋은 폴링이 스펙입니다. (참고할 만한 글)

리액트에서 폴링 구현하기

자바스크립트에는 setInterval 이라는 함수가 있습니다. 이걸 이용하면 됩니다.

기존에 훅이 나오기 전에는 이 글 처럼 구현했습니다. 마운트될 때 setInterval 하고 언마운트될 때 clearInterval 했습니다.

훅이 나왔으니 마운트 시점을 componentOnMount 같은 것들 말고 useEffect 가 다 담당하게 되었습니다. 그냥 위의 글을 훅 패턴으로 옮기기만 하면 됩니다. 이런 식으로요

근데 상당히 자주 사용되는 패턴이고 하다 보니 댄 아브라모브께서 2019년에 꽤 괜찮은 훅을 만들어내셨습니다. 이 글 을 참고해 주세요!

힌트만 드리려고 했는데 답을 다 알려드려 버린 것 같네요 🤔