Refs
DOM 내부에서 요소를 찾으려면 querySelector와 같은 메서드를 통해 찾을 수 있다.
하지만 이러한 작업은 해당 파일만이 아닌 HTML 구조를 모두 찾아야 하기 때문에 비효율적이다.
ref 속성을 사용해서 해당 요소를 참조할 수 있다.
참조할 때는 this의 $ref 객체를 통해 참조할 수 있다.
단 created() 라이프 사이클에서는 DOM 구조가 연결되어있지 않기 때문에 참조하지 못한다.
ref 속성으로 컴포넌트 요소를 찾을 시에는 Proxy 인스턴스를 반환한다.
내부 내장 기능인 $el을 참조하면 해당 컴포넌트의 루트 노드를 반환한다. (h1)
하지만 최상위 요소가 2개 이상이면 제대로 참조하지 못한다.
$refs 속성을 참조해서 해당 요소를 참조할 수 있다.
$nextTick
아래 예제를 살펴보면 반응형 데이터를 통해 요소가 렌더링 되거나 되지 않을 수 있다.
button을 누르면 input 컴포넌트가 렌더링 되고 focus 함수를 실행시키려고 했지만 에러가 발생한다.
그 이유는 반응형 데이터가 변경되자마자 화면에 출력된다는 것을 보장할 수 없기 때문이다.
최소한 onEdit함수가 다 처리가 되면 화면에 출력된다는 것을 보장한다.
이것을 해결할 수 있는 방법이 두 가지가 있는데 setTimeout과 $nextTick을 사용하는 것이다.
setTimeout을 사용할 때 time을 생략하면 0초를 나타내고 callStack을 통해서 뒤로 밀려나게된다. 따라서 화면에 출력이 되고 난 후 focus 함수를 실행시킬 수 있다.
또한 VueJS 에서는 $nextTick이라는 내장 기능을 제공한다.
$nextTick은 데이터를 수정하고 나서 화면이 바뀌는 것을 보장해서 콜백을 실행해준다.
