[트러블 슈팅] 롱 폴링 방식 과정에서 메모리 누수 발생 - 100-hours-a-week/4-bull4zo-fe GitHub Wiki

롱 폴링 과정에서의 메모리 누수(6/12)

🐞 에러 내용

• 롱 폴링을 사용하는 컴포넌트가 unmount되어도 계속해서 요청이 발생하며 메모리 누수가 발견됨

🔍 원인 분석

• 롱 폴링을 위해 설정한 poll 함수가 컴포넌트가 unmount되어도 사라지지 않고, 계속해서 존재하며 동작함

✅ 해결 방법

• useRef를 통해 mount, unmount 정리 함수를 통해 값을 조절하고, poll함수가 unmount된 경우 동작하지 않도록 로직 개선

useEffect(() => {
    if (!longPollingEnabled) return

    let timer: ReturnType<typeof setTimeout>
    let hasRetried = false

    const poll = async () => {
      const result = await refetchLongPolling()

      if (result?.status === 'success') {
        hasRetried = false
        timer = setTimeout(poll)
      } else if (!hasRetried) {
        hasRetried = true
        timer = setTimeout(poll, 3000)
      } else {
        toast.error('댓글을 불러오는 중 오류가 발생했습니다. 새로고침 후 다시 시도해주세요.')
      }
    }

    poll()

    return () => clearTimeout(timer)
  }, [longPollingEnabled, refetchLongPolling])

🤔 향후 대응 방안

• 컴포넌트 unmount시 해당 컴포넌트에서 발생한 통신요청들까지 강제 언마운트하도록 대응 가능

💬 회고

• 롱 폴링을 처음 연결하면서, 메모리 누수에 대해서 고려하지 못했다.