7. 반응형 기초 (reactive, ref, toRefs, toRef, readonly)

reactive 함수는 객체나 배열같은 레퍼런스 타입을 반응형 객체로 만들 수 있다.

 

String, number, boolean 이러한 프리미티브한 타입을 반응형 객체로 만들려면 어떻게 해야할까?

primitive 타입에 reactive 함수를 쓰면 반응형으로 동작하지 않는다.

reactive 함수는 객체나 배열같은 reference 타입의 반응형 상태, 반응형 객체를 선언하는 함수이기 때문이다.

 

console.log 로 찍어보면 메시지는 그냥 string이다.

 

자바스크립트 언어의 특성을 보면 당연한 결과다. 

아에 값 자체를 새로 바꿔버리기 때문이다.

 

retrun시킨 message (콧수염괄호 안에 있는 message) 와

addMessage() 함수 안에 있는 message 두개의 상태를 서로 동기화 하려면

메모리주소를 message가 갖고있고 그 주소를 서로 공유해야하는데

값 자체를 바꿔버리기 때문에 두 message가 연결이 안되는게 당연한 결과다.

 

그럼 반응형이 되게 하려면? reactive를 사용해서 사용하면 된다.

 

이렇게 되면 결국엔 primitive type를 선언한게 아니라 객체를(reference type) 선언한게 된다.

그래서 반응형 API에서는 primitive type를 선언할 수 있는 ref 함수를 제공한다.

---

ref로 원시값 반응형 데이터 생성하기

reactive 함수가 객체타입에만 동작했다면, ref 함수는 number, string, boolean 이러한 primitive type 반응형 상태를

만들때 사용하는 반응형 API다.

 

ref 메서드는 변이 가능한 객체를 반환한다. 이 객체 안에는 value라는 하나의 속성만 포함하는데

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

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

(결국 원시타입 string을 객체로 만들어서 반응형 적용함)

 

결국 ref 반응형 객체는 value 값에 대한 참조(reference) 역할을 한다.

그래서 ref 인거다.

 

script 에서는 .value 를 꼭 붙여서 속성에 접근해서 사용해야하고 

템플릿에서 사용할때는 return 된 반응형 객체는 자동적으로 내부에서 언랩핑 되기 때문에

바로 변수명으로 사용해도 된다.

---

반응형 객체의 ref Unwarpping

 

 

 

 

reactive의 속성에 ref를 넣는다면 undifiend가 뜬다. 

그리고 state.count.value에 .value 를 지우게 되면 잘 출력된다.

이렇게 ref로 선언한 데이터를 반응형 객체의 속성으로 주입하게 되면

자동으로 .value가 언랩핑되어 사라져서 일반 속성을 사용하는것처럼 사용할 수 있다.

그리고 반응형은 여전히 연결되어 있다.

---

배열 및 컬렉션의 참조 Unwarpping

 

반응형 객체와 달리 ref가 반응형 배열 또는 Map과 같은 기본 컬렉션 타입의 요소로 접근될 때, 수행되는 래핑 해제가 없습니다.

래핑되는줄 알고 arr[0]으로 썼는데 배열에서 reactive의 값에 ref를 넘기면 언래핑이 되지 않는다.

arr[0].value 이렇게 접근해야 가져와진다. 

 

 

객체에 ref값을 넣었을때는 .value가 안 붙고

배열에 ref값을 넣었을때는 .value가 붙는다.

---

반응형 상태 구조 분해하기 (Destructuring)

 

큰 반응형 객체의 몇몇 속성을 사용하길 원할 때, 원하는 속성을 얻기 위해 ES6 구조 분해 할당을 

사용하는것은 매우 일반적 입니다

그치만 안타깝게도, 구조 분해로 인해 두 속성은 반응형을 잃게 될 것 입니다.

이런 경우, 반응형 객체를 일련의 ref 들로 변환해야 합니다. 

이러한 ref 들은 소스 객체에 대한 반응형 연결을 유지합니다

 

 

toRefs, toRef를 사용하면 반응형 객체의 속성과 동기화 됩니다.

그래서 원본 속성을 변경하면 ref 객체가 업데이트 되고 그 반대의 경우도 마찬가지 입니다.

---

 

readonly 를 이용하여 반응형 객체의 변경 방지

 

때때로 반응형 객체 (ref나 reactive) 의 변화를 추적하기 원하지만, 또한 특정 부분에서는 

변화를 막기를 원하기도 합니다.

 

예를 들어, provide/Inject로 주입된 반응형 객체를 갖고 있을 때, 

우리는 그것이 주입된 곳에서는 해당 객체가 변이되는 걸 막고자 할 것입니다.

이렇게 하려면 원래 겍체에 대한 읽기 전용 프록시를 생성 하십시오

 

---

Reactivity Transform 실험적인 단계

 

refs 와 함께 .value를 사용해야 하는 것은 JavaScript의 언어 제약으로 인한 단점입니다.

primitive Type을 reference Type으로 다뤄야하기 때문입니다.

 

그러나 compile-time transforms을 사용하면 적절한 위치에 .value를 자동으로 추가하여 인체 공학을 개선할 수 있습니다.

---

 

레퍼런스 타입(reference type)"은 자바스크립트에서 객체, 배열, 함수 등과 같은 복합 데이터 타입을 가리킵니다.

이러한 데이터 타입은 변수에 할당될 때, 실제 값이 직접 복사되는 것이 아니라

해당 값의 참조(메모리 상의 주소)가 변수에 저장됩니다.

 

이에 반해 "원시 타입(primitive type)"은 직접 값을 가지고 변수에 할당됩니다.

자바스크립트에서 다음은 레퍼런스 타입에 해당합니다:

1. 객체(Object):
2. const myObject = { key: 'value' };
3. 배열(Array):
4. const myArray = [1, 2, 3];
5. 함수(Function):
6. const myFunction = function() { /* 코드 */ };

레퍼런스 타입의 특징은 여러 변수가 같은 객체를 참조할 수 있다는 것입니다. 따라서 한 변수에서 객체를 변경하면 다른 변수에서도 변경된 객체를 참조하게 됩니다.

const objA = { key: 'value' }; 
const objB = objA; 
objA.key = 'new value'; 

console.log(objB.key);
// 출력: 'new value'

 

여기서 "Reactive 함수"는 주로 Vue.js나 다른 리액티브 라이브러리에서 사용되는 개념으로, 데이터의 변경을 감지하고 자동으로 업데이트를 수행할 수 있게 만드는 함수를 의미합니다. 이러한 함수들은 객체나 배열과 같은 레퍼런스 타입을 반응형(reactive)으로 만들어주어 데이터의 변화를 추적하고 반영할 수 있도록 도와줍니다.