[Vue 3] ref와 reactive의 차이

Vue 2에서 객체의 값을 수정할 때 바뀐 값에 반응하지 않는 문제점이 있었다고 한다.
이를 해결하기 위해 Vue 3에서 reactive를 추가한 것

• ref

  • 객체를 가리키고 있어 객체 자체가 바뀌어야 반응

  • 내부 필드가 바뀌어도 가리키고 있는 객체가 그대로인 경우 바뀐 것을 인식하지 못해 반응하지 않는다.

  • 따라서 내부 필드가 바뀌지 않는 객체를 사용할 경우 ref 사용

    • ex) primitive type(숫자, 문자 등), 배열 전체를 새로 바꾸는 경우

  • ref 타입의 값을 바꾸고 싶은 경우, .value로 접근하여 값을 바꿀 수 있다. 즉, value라는 객체로 한 겹을 씌운 것

    • ex.

      const str = ref("");
       str.value = "hello";

• reactive

  • 객체 내부의 필드를 가리키고 있어 객체의 필드가 바뀌는 경우에는 반응하지만, 객체 전체가 바뀌는 경우에는 반응하지 않는다.

  • 따라서 내부 필드가 바뀌어야 하는 경우 reactive 사용

    • ex) 필드를 가지는 객체 타입, 배열의 원소가 바뀌는 경우

  • reactive는 .value를 사용하지 않고 바로 데이터에 접근할 수 있다.