Vue - refs

refs란? vue에서 특정 요소나 컴포넌트를 참조할 수 있도록 해주는 것 

 

refs를 사용하지 않고 특정 요소를 찾는 방법으로는 querySelector을 이용하는 것이다

패스트 캠퍼스- 한 번에 끝내는 프론트엔드 개발 초격자 패키지 일부

-> console.log에서 출력되는 것은 h1 요소 안에 들어간 Hello world 라는 텍스트이다.

 

refs를 사용한 예)

패스트 캠퍼스- 한 번에 끝내는 프론트엔드 개발 초격자 패키지 일부

-> 주의할 점은 해당 요소 (ref 로 참조하는 것들) 은 컴포넌트가 html 구조와 연결된 직후에만 사용할 수 있기 때문에 created라는 라이프 사이클에서는 사용불가능 하다.

 

🤔 querySelector 와 ref 가 비슷한거 같은데 그럼 뭘 쓰는게 좋은거지? 무슨 차이가 있을까?

-> 성능이 포인트가 될 수 있다고 한다.

-> ref를 사용하면 컴포넌트 인스턴스를 얻을 수 있는데. querySelector로는 불가능하다.

(참조 링크: https://forum.vuejs.org/t/difference-between-refs-and-queryselector/35504)

 

'ref를 사용하면 컴포넌트 인스턴스를 얻을 수 있는데. querySelector로는 불가능하다' 라는 말이 무슨말일까?

패스트 캠퍼스- 한 번에 끝내는 프론트엔드 개발 초격자 패키지 일부

패스트 캠퍼스- 한 번에 끝내는 프론트엔드 개발 초격자 패키지 일부

-> Hello라고 등록된 컴포넌트의 내부 코드는 위의 <h1> hello~ 가 적혀있는 사진을 참고하면 된다.

이때 ref를 통해 해당 컴포넌트를 참조하는데 ...

밑의 mounted 를 보면 console.log를 통해 ref에 접근하는 것을 볼 수 있다.

뒤에 해당하는 $el은 해당 컴포넌트의 최상위 엘리먼트 즉 h1을 의미한다. 

콘솔에 출력된 것을 보자면 <h1> Hello~</h1> 이 출력되는 것을 볼 수 있다.