Reactivity(반응형)

Reactivity

reactive()

반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있다.

객체타입에만 반응한다.

기본타입(number, string, boolean)을 반응형으로 만들기 위해서 ref 메서드를 사용한다.

예시

⬇️⬇️ 실행결과 ⬇️⬇️

 

 

ref

변이가능한 객체를 반환한다.

이 객체에는 value라는 하나의 속성만 포함한다.

value 값은 ref() 메서드에서 매개변수로 받은 값을 갖고 있다.

이 객체는 내부의 value 값에 대한 반응형 참조 역할을 한다.

예시

⬇️⬇️ 실행 결과 ⬇️⬇️

템플릿에서 ref에 접근할 때는 .value를 빼고 작성해도 잘 작동한다.

 

 

toRef/toRefs

예시 : 일반적인 구조분해할당

⬇️⬇️ 실행 결과 ⬇️⬇️

⬇️⬇️ 콘솔 실행 결과 ⬇️⬇️

콘솔 실행결과를 보면, 일반적인 구조 분해 할당을 이용했을 때, 반응형을 잃어버린 것을 알 수 있다.

이 때, 반응형을 잃지않고 사용하기 위해서 toRef, toRefs를 사용할 수 있다.

하나만 구조분해 할당을 할 때는 toRef를 사용하고,

여러 개를 한번에 구조분해 할당을 할 때는 toRefs를 사용한다.

 

예시 : toRefs()

⬇️⬇️ 실행 결과 ⬇️⬇️