섹션 19 : 컴포지션 API(2) reactive - 객체만, ref - 객체, 문자열, 숫자, 불리언 등

객체를 만들어 나이를 추가하고 출력을 해보았다. 

화면에 변화가 없다. 그 이유가 이름 및 나이값은 평범한 문자열과 숫자이지 반응형 값이 아니라서이다.

이론상으로는 user객체에 변화가 생기면 Vue가 파악해야 하지만 사용자 객체 내부 정보를 이렇게 직접 파악하고 있기 때문에 템플릿에서 사용자 정보를 활용한다는 것을 인지하지 못합니다.

Vue는 문자열과 숫자가 활용된다는 것만 알 수 있는데 이렇게 구체적인 값의 정보는 지속해서 파악하지 못하기 때문에 변화를 감지하지 못한 겁니다.  return문에 사용자 객체 전체를 제공할 수도 있습니다.

 

템플릿의 사용자 키에 사용자 ref를 넣고 출력하면 되는 겁니다.

setup() 함수의 return 문에는 미가공 객체를 전달하는데요.

이것이 Vue에 있어 중요한 것입니다.

미가공 ref객체를 받으면 객체 내부의 반응성을 인지하고 새로운 값이 지정되거나 템플릿에서 사용될 때는 알기 때문에

템플릿에서 객체 사용 위치를 찾아서 코드를 업데이트 해줍니다.

개별 값을 따로 두는 대신에 하나의 객체를 이용해서 ref를 사용하는 방법을 알아봤습니다.

 

만일 객체를 사용한다면 ref보다 더 나은 대안이 있습니다.

ref를 사용하는게 아니라 return문의 다른 코드는 지우고 사용자 키만 활용하면 됩니다.

reactive 함수를 사용할 겁니다.

ref는 문자열, 숫자, 객체 등 다양한 값을 사용했다면

reactive는 객체만 이용합니다. 따라서 reactive에는 객체만 전달해야 합니다.

reactive는 중요한 작업을 하나 하는데여요.

이름과 나이를 value프로퍼티를 갖는 객체로 래핑하고 기존 값에 포인터를 가르키는 게 아니라

reactive에 전달한 객체를 프록시로 래핑해서 반응형으로 만들어진 객체를 사용할 수 있게 해줍니다.

마치 래퍼가 없는 것처럼 사용할 수 있습니다.

반응형 데이터 관리의 두 가지 주요 개념인 ref와 reactive를 알아봤습니다.