React에서 X초마다 Polling API

title_thumbnail(React 문제 해결)

Table of Contents

제목: React에서 X초마다 Polling API – Best Practices와 구현

소개

API를 정기적으로 폴링하는 것은 웹 개발에서 흔한 요구사항입니다. 특히 화면에 실시간 데이터 업데이트를 표시해야 할 때마다 필요합니다. 이 블로그 포스트에서는 React를 사용하여 X초마다 API를 폴링하는 올바른 접근 방식과 이 기능을 구현하는 최선의 방법을 검토해보겠습니다.

기본 접근 방식

API를 폴링할 때 가장 간단한 방법은 componentDidMount 라이프사이클 메서드에서 setInterval 메서드를 사용하는 것입니다. 다음은 기본적인 구현 예시입니다:

componentDidMount() {
  this.timer = setInterval(() => this.getItems(), 1000);
}

componentWillUnmount() {
  clearInterval(this.timer);
}

getItems() {
  fetch(this.getEndpoint('api url endpoint'))
    .then(result => result.json())
    .then(result => this.setState({ items: result }));
}

이 코드는 componentDidMount 메서드에서 setInterval을 사용하여 타이머를 설정하고 1초마다 getItems 함수를 호출합니다. getItems 함수는 API 요청을 수행하고 가져온 데이터로 컴포넌트의 상태를 업데이트합니다. 컴포넌트가 언마운트될 때는 clearInterval을 사용하여 인터벌을 정리하여 메모리 누수를 방지합니다.

메모리 누수 방지

기본 접근 방식은 작동은 하지만 제공된 코드에는 메모리 누수 문제가 있을 수 있습니다. 컴포넌트가 언마운트될 때 인터벌 참조를 null로 설정하지만 인터벌 자체는 계속해서 실행되며 더는 존재하지 않는 컴포넌트에 setState를 시도하게 됩니다. 이를 제대로 처리하기 위해 null로 설정하기 전에 인터벌을 중지해야 합니다. 다음은 수정된 코드입니다:

componentWillUnmount() {
  clearInterval(this.timer);
  this.timer = null;
}

인터벌을 먼저 정리하고 this.timer를 null로 설정함으로써 컴포넌트가 언마운트되기 전에 인터벌이 중지되도록 보장합니다.

Hooks 사용

만약 React hooks와 함께 함수형 컴포넌트를 사용 중이라면, 접근 방식이 약간 다릅니다. 다음은 useInterval 커스텀 훅을 사용한 샘플 구현입니다:

// utils.js

import React, { useState, useEffect, useRef } from 'react';

export const useInterval = (callback, delay) => {

  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

// MyPage.js

import useInterval from '../utils';

const MyPage = () => {

  useInterval(() => {
    // 여기에 인터벌 코드 작성
  }, 1000 * 10);

  return <div>내 페이지 내용</div>;
}

이 구현에서는 useState, useEffect 및 useRef 훅을 사용하여 useInterval이라는 커스텀 훅을 생성합니다. 그런 다음 이 커스텀 훅을 함수형 컴포넌트(MyPage) 내에서 사용하여 인터벌 로직을 처리할 수 있습니다. 여기서는 10초마다 인터벌 코드가 실행됩니다.

대안적인 접근 방식

폴링 프로세스를 더 세부적으로 제어하거나 다양한 시나리오를 처리해야 할 경우, 몇 가지 대안적인 접근 방식을 고려할 수 있습니다:

1. 재귀적인 setTimeout:

setInterval 대신 재귀적인 setTimeout 함수를 생성하여 API를 폴링할 수 있습니다. 이 방식은 이전 API 호출의 성공 또는 실패를 처리하고 타이밍을 조정할 수 있는 기능을 제공합니다. 다음은 샘플 구현 예시입니다:

let apiTimeout = setTimeout(fetchAPIData, 1000);

function fetchAPIData() {
  fetch('API_ENDPOINT')
    .then(res => {
      if (res.statusCode === 200) {
        // 응답 처리 및 뷰 업데이트
        // 1초 후에 호출될 setTimeout API 요청 재생성
        apiTimeout = setTimeout(fetchAPIData, 1000);
      } else {
        clearTimeout(apiTimeout);
        // 실패시 처리
      }
    })
    .catch(() => {
      clearTimeout(apiTimeout);
      // 실패시 처리
    });
}

이 방식은 타이밍을 제어하고 실패를 우아하게 처리할 수 있게 합니다.

2. 지연값 동적으로 조정하기:

일정 조건이나 외부 요소에 기반하여 폴링 간격을 증가 또는 감소시키려면, 지연값을 동적으로 조정할 수 있습니다. 다음은 이를 구현한 예시입니다:

let delay = 1000;

function fetchData() {
  fetch('API_ENDPOINT')
    .then(result => result.json())
    .then(result => {
      // 결과 처리
      // 결과나 다른 조건에 기반하여 지연값 조정
      delay = result.delay;
      setTimeout(fetchData, delay);
    });
}

이 예시에서는 각 API 호출의 결과에 따라 지연값을 조정하여 폴링 프로세스를 더 유연하게 구현할 수 있습니다.

결론

API를 정기적으로 폴링하는 것은 웹 개발에서 흔한 요구사항이며, React는 이러한 기능을 처리하기 위해 여러 접근 방식을 제공합니다. setInterval을 사용하는 기본 접근 방식을 선택하든지 hooks와 커스텀 훅의 강력한 기능을 활용하든지, 메모리 누수 문제를 제대로 처리하고 폴링 프로세스가 특정 요구사항과 일치하도록 보장하는 것이 중요합니다.

올바른 접근 방식을 따르고 최선의 방법을 구현함으로써 React 애플리케이션에서 API를 효과적으로 폴링하고 실시간 데이터 업데이트를 표시하여 원활한 사용자 경험을 제공할 수 있습니다. 필요에 가장 적합한 방법을 선택하고 React 프로젝트에서 폴링 기능을 구현해 보세요!

참고 자료 :

https://stackoverflow.com/questions/46140764/polling-api-every-x-seconds-with-react

같은 카테고리의 다른 글 보기 :

reactjs