이전 게시글이었던 Composition API 에서 반응형 변수를 잠깐 언급했었다.
reactive(), ref() 등의 형태로 선언하고 사용했던 변수였었는데,
이번 게시글에서 해당 반응형 변수와 나머지 속성들에 대해 공부하려고 한다.

반응성이란?

과연 반응성이란 어떤것을 말하며, 왜 필요할까?
Javascript에서 일반적으로 덧셈을 하는 경우를 생각해보자.
아래와 같이 간단한 a와 b의 합을 출력하는 html 파일이 있다고 해보자.
image

과연 a나 b의 값을 변경하면 c의 값도 자동으로 바뀌게 될까?
결과를 보면 알겠지만, a나 b의 값이 중간에 변경되어도 c는 변하지 않는다.
즉, 우리는 매번 c의 값을 update 해주어야 한다는 번거로움이 있다.
image

하지만 간단한 예시로 엑셀의 수식 함수를 한 번 생각해보자.
C1 = A1 + B1 이라고 함수를 걸었을 때, A1 셀을 변경한다면?
당연히 A1과 B1의 합인 C1은 자동으로 값이 바뀌도록 구현되어있다.
바로 이런 부분을 우리는 Reactivity, 반응성 이라고 부른다.

반응형 변수

Options API 방식을 사용할 땐, message : "안녕"과 같이 변수를 선언했었다.
하지만 Compostion API에서는 const msg = ref("안녕")과 같이 선언을 했었다.

공식 가이드에 따르면, Options API를 사용할 때 data()를 통해서 값을 반환하면,
내부적으로 reactive() 메서드를 통해 반응형 변수를 선언하는 것과 같다고 한다.

Reactive vs Ref

reactive()로 선언하는 변수와 ref()로 선언하는 변수에는 어떤 차이가 있을까?
reactive()보다는 ref() 쪽이 좀 더 넓은 범위에 사용된다.
그 이유로, reactive()는 아래와 같은 두 가지 제약사항이 있다.

  • 객체나 배열 또는 Map, Set과 같은 Collection 유형에만 동작한다.
    • 즉, 원시 타입에는 reactive()를 씌울 수 없다.
  • 반응형 객체에 대해 항상 동일한 참조를 유지해야 한다.
    • 선언한 반응형 변수를 다시 reactive()로 참조하는 경우, 기존 연결이 끊어진다.
    • 선언한 반응형 변수를 로컬 변수에 할당하는 경우, 연결이 끊어진다.

계산된 속성

Vue에는 계산된 값을 바로 사용할 수 있는 computed() 속성이 존재한다.