📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1
• 참고 자료 2

📜 Chapter

useTemplateRef()

markRaw()

ref

• ref를 사용해서 반응형 변수로 data를 보통의 자바스크립트 함수로 methods를 대체한다.
• Vue 템플릿의 DOM 또는 컴포넌트를 가리킨다.
• Vue 3에서는 reactive reference를 의미한다.
• 객체를 포함한 원시 타입 모두 받을 수 있다.
• 반응형이다. (값이 변함에 따라 감지하고 해당 값에 대한 작업 실행)
• 이후 사용을 위해선 하나하나 return을 해야 한다.
• 값은 .value를 통해 접근해야 한다.
• 내부 값을 취하고 내부 값을 가리키는 단일 속성 .value를 갖는 반응적이고 변경 가능한 ref 객체를 반환한다.
• ref 객체는 변경 가능하다.
• 즉, .value에 새 값을 할당할 수 있다. 또한 반응적이다. 즉, .value에 대한 모든 읽기 작업이 추적되고 쓰기 작업이 관련 효과를 트리거한다.
• 객체가 참조의 값으로 할당되면 객체는 reactive()을 사용하여 깊은 반응성을 갖게 된다. 이는 또한 객체에 중첩된 참조가 포함되어 있으면 깊게 펼쳐질 것임을 의미한다.
• 깊은 변환을 피하려면 대신에 shallowRef()를 사용해라.

ref - 참조하기