반응형 상태 선언하기
자바스크립터 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있다. 반응형 객체가 되면 vue는 해당 객체의 상태를 추적할 수 있고, 상태가 변경이 될때 값도 없데이트 된다.
•
예제 코드
코드 복사하기
•
확인
이렇게 반응형 객체가 되면, vue가 상태를 추적할 수 있고 중첩된 객체라고 할지라도 값이 변경됨을 감지해 없데이트 된다.
그리고 위의 문법처럼 반응형 객체가 아니라고 할지라도 reactive함수를 사용해 반응형 객체로 만들 수 있고, vue는 해당 객체의 상태를 추적한다.
기초자료형도 반응형으로 만들기
위의 문법 그대로 시도하기
반응이 없다.
이는 message를 수정이 아니라 아예 바꿔버리기 때문에 (메모리주소가 아예 바뀌기 때문에)
반응이 안되는 것이다.
하지만 메모리주소를 유지하고 내부 속성을 바꾼다면 반응하게 할 수 있다.
기초자료형 주소 유지하고 속성이 반응할 수 있게 만들기
코드 복사하기
이렇게 중괄호로 기초자료형을 감싸서, value로 할당하면 값이 바뀌어도 메모리 주소가 바뀌는 것이 아니기 떄문에 반응형이 된다.
하지만 이런구조로 만든다는 것은 결국 기초자료형을 객체로 만든 꼴이 된다.
따라서 reactive함수는 객체타입만 사용이 가능하고 말할 수 있다.
ref함수 사용
reactive함수는 객체타입에만 동작한다. 그래서 기초자료형 타입 (number, string, boolean)을 반응형으로 만들고자 할 때 ref메소드를 사용할 수 있다.
const count = ref(0)
console.log(count.value) // 0
JavaScript
복사
위 처럼 선언하게 되면, count는 int타입이 아니라 value라는 속성을 가진 ref타입이 된다. 즉 객체가 된다. 그래서 0을 다시 꺼내 쓸려면 count.value 로 사용할 수 있다.
•
적용
ref 함수로 똑같은 기능을 사용하게 되고, 로직 부분에는 고칠 코드가 없다.
하지만 return에서 message로 리턴될 때, 내부 value에 있는 값이 다시 message로 할당이 되기 때문에, 템플릿에서는 message.value를 사용하지 않고 그대로 message를 사용해도 된다.
반응 잘함
ref자료형을 reactive에 사용하게 된다면?
만약에 ref함수를 reactive로 감싸게 되면 어떻게 될까??
코드 예제
ref타입은 내부에 value속성만 가지고 있는 객체인데, 이렇게 사용해야 정상 아닐까?
이렇게 위의 count.value는 0이 잘 리턴이 되는데,
state.count.value는 undefined가 떳다.
•
state.count (value 제거)
잘 나온다.
ref타입을 reactive로 감싸게 되면 ref타입을 upwrapping해서 할당한다.
그래서 state.count에 .value를 안 찍어도 된다.
배열을 ref타입으로 참조할 때?
예제 코드
언래핑하지 않기 때문에, .value 로 값을 꺼내야 된다.
구조분해할당
반응형 데이터를 구조분해할당을 하게 되면, 반응형 상태를 잃어버리게 된다.
코드 예제
반응형 속성을 얻은 book이 빨간네모처럼 구조분해 할당이 되면,
해당 author와 title은 book 참조해서 다시 값을 할당한 것이므로 반응형이 없는 기초자료형이 된다 (여기선 string)
이렇게 vue도구로 들어가보면, book은 반응형 속성이 살아있어서 연필 편집표시가 나타난다. 구조분해할당된것은 반응형 속성이 없기 때문에 이와 같은 표시가 없다.
반응성을 잃어버리지 않고 구조분해 할당 될 순 없을까??
toRef 함수로 구조분해 할당을 하면 author와 title은 반응형 속성을 가지게 된다.
•
확인
반응형 속성이 적용되면 이렇게 (Ref) 속성을 가졌다고 나타낸다.
그럼 이렇게 book내부의 author를 변경하면 다같이 변경이 된다.
한 개씩 가져올 때는 이렇게
ReadOnly
때때로 반응형 객체의 변화를 추적하기를 원하지만, 또한 특정 부분에서는 변화를 막기를 원하기도 한다. 특히 Provide/Inject 로 주입된 곳에서는 변이되는 것을 막고자 한다면, readonly를 사용한다.
예제 코드 작성
코드 복사하기
original을 변경하는 로직이랑
copy에 original에 readonly 속성을 넣어서 테스트 해보았다.
•
확인
노란색 내용을 보면 target이 readonly이기 때문에 변경이 안된다는 메시지를 받았다.