object변수는 ref와 reactive 중 어떤 것으로 선언해야할까
각각의 장단점이 있다 확인해보자

다음과 같은 object가 있다고 가정

const data = { id: 1, title: '제목1', content: '내용1', createdAt: '2023-01-01' }

이 data를 ref로 선언하는 경우

  const form = ref({});
  form.value = { ...data };


  <template>
    <h2> {{ form.id }}</h2>
    ...
  </template>
  • 장점: 손쉬운 객체 할당(reactive에 비해)
  • 장점2: reactive는 object만 가능한 반면 ref는 primitive 변수도 사용 가능하여 일관성이 있다.
  • 단점: 데이터 조회를 위해선 form.value.title과 같이 .value를 붙여야한다

이 data를 reactive로 선언하는 경우

  const form = reactive({});
  form.title = data.title;
  form.content = data.content; 
  //이런식으로 일일이 복사해준다


  <template>
    <h2> {{ form.id }}</h2>
    ...
  </template>
  • 장점: .value를 붙일 필요가 없다. 즉 form.title 이렇게 사용 가능하다.
  • 단점: 객체 할당이 불가능하여 하나하나 필드값을 복사해주어야한다

일반적으로는 일관성을 위해 ref를 더 많이 사용한다는 의견..

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “실전편”

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy