nextTick의 필요성
•
Javascript는 비동기로 처리되는 특성을 갖고있다.
•
떄문에 Data가 업데이트 되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생할수있다.
•
이와같은 문제점을 해결해주는 것이 callback 함수 nextTick이다.
nextTick 사용해 스크롤 제어하기
•
Data갱신 후 UI까지 갱신한 뒤에 nextTick 내부가 실행된다.
const liveChat = ref(null)
const printcon = () => {
nextTick(() => {
liveChat.value.scrollTop = liveChat.value.scrollHeight
})
}
JavaScript
복사
printcon으로 인한 Data 갱신, UI 갱신이 일어난 후에 Scroll 변경이 실행되기 때문에 가장 밑으로 스크롤을 옮길 수 있다.