Composition API: ref() vs reactive()

ref는 primitive type을 받고, reactive는 object를 받는다 라고만 알고 있었다. 

하지만 ref도 객체를 다룰 수 있고, reactive와의 차이점을 정리해서 사용할 줄 알아야 한다. 

 

//api

const post = [{ ..... 여러개 데이터 있음}]

export function getPostById(id) {
  const numberId = parseInt(id);
  return posts.find(item => item.id === numberId);
}

데이터를 export해주는 함수를 생성

 

 

const id = route.params.id;

const item = ref({});
const fetchData = () => {
  const data = getPostById(id);
  item.value = { ...data };
};
fetchData(id);

ref는 value로 컨트롤 하기때문에 반응형을 사용할 수 있다. 

그리고 전개연산자를 통해서 item안에 data의 모든 값을 한꺼번에 받을 수 있다. 

전개구문을 이용하여 객체복사를 안하게 된다면 데이터가 변경됐을 때 (주소값을 참조하고 있기 때문) 함께 데이터 값이 변경되게 된다.  때문에 객체 복사를 통해서 넣어야한다.

 

// const item = ref({});
const item = reactive({});

const fetchData = () => {
  const data = getPostById(id);
  item = { ...data };
};
fetchData(id);

만일 reactive함수인 item에 위 로직처럼 사용하게 된다면 아예 다른 주소값을 넣기에 반응성을 잃게 된다. 

(그냥 object가 생성됨)

 

// const item = ref({});
const item = reactive({});

const fetchData = () => {
  const data = getPostById(id);
  // item.value = { ...data };
  item.title = data.title;
  item.content = data.content;
  item.createdAt = data.createdAt;
};
fetchData(id);

ref대신  reactive를 사용하게 된다면 각각 속성별로 data의 속성과 매핑해야한다. 

 

 

 

[ ref로 선언시 ]

- 원시, 참조 타입 둘다 가능하다.

- 원시 값을 참조 받아 객체로 만들기에 value속성에 담아 놓는다. 

- 접근시에 value를 이용해야 한다. 

장점: ...로 한꺼번에 객체할당이 가능하다. 타입이 모두 되기에 일관성 유지가 가능

단점: .vlaue를 계속 붙여줘야 한다. 

 

[reactive로 사용시]

- 참조 타입에 사용한다. 

장점: .value 붙이지 않고 바로 반응성으로 사용할 수 있다.

단점: 객체할당이 불가능하다. 

 

소속된 컨벤션에 따라서 사용하는 걸 추천한다. 

https://markus.oberlehner.net/blog/vue-3-composition-api-ref-vs-reactive/

Vue 3 Composition API: ref() vs. reactive()