[220711] javascript - sleep() 지연 함수 쓰기!

리액트를 쓰다 보면 컴포넌트 간에 데이터를 전달할 일이 많다. 이때 받아오는 데이터보다 브라우저 화면이 먼저  처리될 때가 있다. 분명히 처음엔 화면에 잘 나오는데 새로고침만 하면 화면에 제대로 출력이 안 되는 것이 아닌가.

분명히 데이터는 가지고 있는데 말이다. 

 

이럴 때, code의 실행을 살짝 지연시켜주면 해결된다! 이미 존재하는 데이터를 전달받아서 가져오는 것과 화면이 출력되는 것 두 가지의 실행이 싱크가 맞지 않아서 이런 현상이 나타나는 것이다. 😁

 

sleep함수는 입력한 시간만큼 code의 실행을 멈춰주는 기능이다. 

자바스크립트 내에는 따로 sleep 함수가 존재하지는 않지만 필요하다면 delay 모듈을 사용해서 쓸 수 있다. delay모듈도 안된다? 그러면 setTimeout을 이용해서 만들 수도 있다 .

 

const sleep = () => new Promise((resolve) => setTimeout(resolve, delay));

useEffect(() =>{
  sleep(1000);
  console.log('hello')
  
},[])

 

1000 만큼, 1초간의 sleep 이후에 'hello'가 출력이 된답니다!!! 

 

 

 

 

✅ 하지만 sleep 함수를 써서 억지로 코드의 실행을 붙잡아두는 건 사고가 날 확률이 높기 때문에 추천하는 방법은 아니다. 서버에 무리가 안 가는 선에서 데이터를 api 통신으로 다시 받아오는 것이 훨씬 안정적이다! 😅