[React] 데이터를 실시간으로 갱신하기(useSWR, setInterval,useQuery)

setInterval() 과 useSWR() 은 모두 데이터를 실시간으로 가져오는 방법이지만, 동작 방식과 목적이 다르다.

setInterval() 

1. setInterval()은 매번 데이터를 가져오기 위해 API에 요청을 보내는 방식이다.
2. 즉, 호출 횟수가 늘어날수록 서버에 부하가 증가한다. 
3. 또한 호출 간격을 지정하더라도 정확히 유지하지 못할 수 있고, 데이터를 가져오다 문제가 발생하면 예외가 발생한다.

useSWR()

1. useSWR은 데이터를 캐싱하고, 필요에 따라 API에 요청을 보내 데이터를 가져오는 방식이다. 
2. 이 방법은 API 요청 횟수가 줄어들고, 가져온 데이터를 캐싱하여 다음 요청시 캐시된 데이터를 리턴함. 
3. 호출 실패시에 적절한 에러 처리 가능함

setInterval() && useSWR()  

=> 서버에 과부하를 주지 않는다고 확신이 되면서 예외 처리 신경 안쓰고 가볍게 코드를 짤거면 setInterval()

   캐싱과 에러 처리가 필요하면서 API 과부하도 안줄거면 useSWR()

useQuery

1. useQuery는 필요에 따라 데이터를 가져오는 것이 아니라, 미리 설정된 쿼리를 기반으로 데이터를 가져온다
2. . 또한, 기본적으로 캐싱을 사용하며, 데이터의 유효성을 검사하여 자동으로 갱신된다.
3.  즉, 실시간으로 데이터를 가져오는 것이 아닌 데이터를 빠르게 가져오고 캐싱하여 다음 요청 시에는 캐시된 데이터를 반환하므로 UI 성능을 향상시키는데 도움이 돤다. 

=> useQuery는 데이터를 빠르게 가져와야 할 때, 캐싱이 필요한 경우, 복잡한 데이터 요청을 처리해야 할 때 등에 유용하게 사용됩니다.