Vue.js의 ref,reative 상태관리와 computed설정

vue.js의 composition api에서 상태관리와 계산된 값을 사용할때 쓰는 것으로 상태관리는 ref,reactive / 계산된 값 표현은 computed를 사용한다.

 

1. ref : 단일값 상태관리 

ref는 숫자,문자열,boolean등과 같이 단일값을 반응형으로 관리하기 위해 사용된다.

const count = ref(0);
count.value++; // 값 증가
console.log(count.value); // 1

특징으로는 다음과 같이 ref로 선언한 count변수에서 ref가 감지하고 있는 number 값의 변경은 자동으로 DOM에 반영된다.

그리고 사용하기 위해선 .value를 통해 사용해야 하는 특징이 있다.

값이 자동으로 DOM에 반영되면, 수동으로 DOM을 업데이트하지 않아 코드가 훨씬 간결해지고, Vue 특성상 DOM전체를 리랜더링 하지 않고, 변경된 부분만 랜더링 하기 때문에 성능최적화도 가능하다. 

 

2. reactive : 복잡한 데이터 관리

reactive는 객체,배열같은 복잡한 데이터를 관리하는데 사용된다. 

const user = reactive({ name: 'John', age: 30 });
user.name = 'Jane'; // 상태 변경
console.log(user.name); // Jane

reactive는 객체나 배열 내부 속성을 반응형으로 관리를 하고, ref랑은 다르게 .value를 사용하지 않는다.

보통 구조화되어있는 데이터를 컴포넌트에서 활용할때 사용되게 된다.

그래서 속성 단위로 상태관리하기 편하고, 데이터 변경 내역을 직관적으로 알수 있는 장점이 있다. 

 

3. computed : 계산된 값 관리

computed는 기존 상태를 기반으로 새로운 값을 계산할 때 사용하며, 단순히 값을 읽는 용도로만 쓰이거나, 상태를 수정하는 데도 활용할 수 있다

const base = ref(10);
const double = computed({
  get: () => base.value * 2,
  set: (value) => { base.value = value / 2; },
});
double.value = 40; // base.value가 20으로 업데이트됨

여기서 computed는 getter만 사용할 경우 읽기 전용 값을 생성하고, setter를 사용하면 값을 수정하는 로직도 구현 가능하다. 

그리고 상태가 바뀔때만 계산 로직을 실행해서 성능 최적화가 가능하다.

computed는 filter를 사용할때나 체크박스 선택항목 관리처럼 특정값을 계산할때 자주 사용하게 된다.