window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁

외부 라이브러리(특히 window에 생성되는)를 이용할 때 useEffect로 가지고 올 수 없는 경우가 존재한다.

이 경우 많은 사람들이 setTimeout 등을 이용해 타이밍을 맞춰주고는 한다.

 

하지만 이렇게 할 경우 단점이 존재한다.

네트워크가 느린 환경들을 고려해 타임을 여유롭게 잡거나 느린 환경을 고려하지 않아 에러가 발생하는 문제다.

 

이 문제 해결을 위해 처음 생각한 방법은 반복문을 활용해 retry를 거는 방법이었는데, 이 경우 다른 호출 스택을 반복문이 잡고 있어 다른 호출들이 먹통이 되는 문제가 발생했다.

 

그래서 내가 선택한 방법은 setInterval을 이용하는 방법이다.

setInterval은 setTimeout과 마찬가지로 작업 큐에 작업을 저장하는 방식이기 때문에 다른 호출 스택이 먹통이 되는 문제가 발생할 위험이 없고 setTimeout과 달리 어느 정도 정밀한 타이밍을 맞출 수 있기 때문이다.

...
useEffect(()=>{
  setLoading(true);
  const intervalFunc = setInterval(()=>{
    if(window?.slow?.lib){
      window?.slow?.lib?.open();
      setLoading(false);
      clearInterval(intervalFunc);
    }
  }, 500);
},[]);
...

 

반응형