함수 실행 시간 조절할 때 (setTimeout활용)

Today

react로 useEffect를 사용하여 데이터를 가져오기를 하고 바로 마지막 대화내용에 자동으로 스크롤이 되도록 함수를 만들어 주었는데, 실행이 안되는 문제가 생겼다. 알아보니, 대화내용 데이터를 읽어들이고 화면에 보여주기 전에 이미 자동스크롤 함수가 실행되어 마지막 대화내용으로 스크롤이 되지 않았던 것이다. 

그래서 알아보니, setTimeout()이라는 함수가 있었고, 이 함수를 사용하면 특정 코드나, 함수를 의도적으로 지연시켜 일정 시간 뒤에 실행되로고 한는 것이 가능했다. 실행 방법은 아래의 사진과 같이, setTimeout(() => {내용}, 지연시킬 시간} 형식으로 적어주면, 지정한 시간뒤에 실행시키는 것이 가능하다. 1000이 1초이기 떄문에 나는 0.1초 뒤에 실행되도록 하였다. 그 결과, 아래의 영상과 같이 잘 실행되었다.