Vue.js 반응형 상태 ref와 reactive

전은찬·2024년 2월 5일
0
post-thumbnail

Vue3에서는 ref로 반응형 값을 생성할 수 있다.

ref 란?


ref로 선언되는 변수는 문자, 숫자, boolean, 객체 등 다양하게 선언할 수 있다.

그리고 setTimeout 함수 부분을 보면 ref로 선언된 answer에 .value를 붙이는 것을 확인할 수 있는데 ref 값을 변경하기 위해서는 .value를 붙여 써서 값을 변경해야한다.

이러한 ref는 반응형 변수(?) 반응성 데이터(?) 아무튼..
반응형으로 만들어지기 때문에 ref의 값이 변경되면 해당 값(변수)를 사용하는 Vue의 template 부분도 자동으로 업데이트 된다.

아, 참고로 template 부분에서는 .value를 붙이지 않아도 된다.

reactive 란?

reactive는 ref와 유사하지만 object 타입(Object, Array, Map, Set)만 선언할 수 있고, 이 객체를 반응형으로 만들어주는 것이다. 프로퍼티가 변경되면 이를 업데이트 해준다.

reactive는 ref처럼 .value를 붙여 사용하지 않아도 된다.
하지만 문자, 숫자, boolean 값은 선언할 수 없고
object일 경우 ref는 재할당 시 반응형을 유지하지만 reactive는 재할당하면 반응형이 없어진다.
Vue 2의 data() 기능과 비슷하다고 함. Vue 3부터 배운 나는...

ref vs reactive

reactive는 반응형을 잃을 수도 있는 단점이 존재하기 때문에 Vue 공식문서에서는 ref를 추천하고 있다.
또 ref가 변수명.value로 접근하기 때문에 차별되어 가독성 부분에서 좋은 점이 있고 그 때문에 유지보수도 좋아진다.

일단 혼용에서 사용하지 말고.. 웬만하면 ref만을 사용하여 반응형을 선언하자 !

profile
A piece of cake

0개의 댓글