• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

nextTick 관련 질문

23.03.20 08:31 작성 23.03.20 08:35 수정 조회수 453

0

ref 태그로 특정 input 태그를 가져와 focus를 주는 과정에서 nextTick 프로퍼티를 통해 작업 순서를 앞당겨주는 것으로 focus를 곧바로 실행시키는 부분은 이해하고 있습니다

( nextTickQueue와 MicroTaskQueue는 이벤트루프상 특정 큐의 실행을 마치기 직전 실행하고 종료하는 것으로 알고 있습니다)

 

그런데 왜 여기서 ref로 잡아낸 태그에 focus를 주는 과정의 렌더링 사이클이 뒤로 밀리는건지 이해를 못했습니다.

클릭이벤트 실행시 onAddList 함수를 실행하게되면 해당 click 이벤트가 큐로 빠지고, focus 이벤트도 큐로 빠져서 실행하게 될텐데, 그러면 렌더링 순서에는 문제가 없다고 보아야 하지 않을까요?

 

이게 단순 자바스크립트 이벤트루프 문제로 보아야할지 뷰 라이프사이클 개념에서 별도의 렌더링 단계가 있다고 보아야할지, 아니면 아예 제가 감을 잘못 잡고 있는건지 헷갈립니다.

course-thumbnail

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

리스트 생성

강의실 바로가기

답변 1

답변을 작성해보세요.

0

김정환님의 프로필

김정환

지식공유자

2023.03.22

$nextTick은 뷰 컴포넌트의 메소드 중의 하나입니다. 뷰 컴포넌트 객체의 상태를 변경하면 돔을 바로(동기적으로) 업데이트하지 않고 뷰만의 렌더링 사이클에 따라 이후 언젠가(비동기적으로) 돔에 상태를 반영합니다. $nextTick의 콜백 인자는 뷰가 돔을 업데이트한 뒤에 실행될 것입니다.

isAddList 상태값을 true로 설정하고 나면 이 변경사항은 비동기적으로 돔에 반영 될 것이고, input 엘리먼트는 그 때 돔에 추가될 것입니다. 이렇게 뷰가 돔 변경을 마친 후에 $nextTick에 전달한 콜백이 실행될 것이고 inputTitle.focus()에 의해 인풋 엘리먼트에 커서를 위치시킬 것입니다.

사실 제가 질문을 제대로 이해하지 못했습니다. nextTickQueue 때문에 헷갈리실수도 있을것 같다는 생각이 듭니다. 수업에서 사용한 $nextTick은 뷰 만의 메소드로서 뷰 렌더링 사이클에 따라 동작합니다.

 

이 글과 비슷한 Q&A