인프런 커뮤니티 질문&답변

//template
<tr v-for="(product,index) 
 in productList" :key="product.id">

// setup
let productList = reactive([])

const getProductList = function() {
  productService.getProductList(null, null, null, null)
    .then((response) => {
       console.log('response.data.data :', response.data.data); // array
       console.log(productList)
       productList = response.data.data
       console.log(productList)
     })
  }

이 코드에서 productList = response.data.data를 할당하니까 반응성이 사라지더라구요 ( 변수에 새로운 값을 할당해버린 게 그 원인이었구요)

그래서

1) productList = ref([]) 로 하고
productList.value = response.data.data 하니까 정상 작동

2) productList = reactive({ a : []}) 로 하고

productList.a = response.data.data

template에서

<tr v-for="(product,index) 
 in productList.a" :key="product.id">

로 사용하니까 정상 작동

3) 이것만 보면 ref로 선언하면 데이터를 받아올 때 .value 하나만 추가해주면 끝이지만 reactive를 사용하면 .a를 이곳저곳에 다 붙여줘야 되는데 객체, 배열은 reactive 안에 넣어서 사용하는 이유는 뭔가요?

4) 그냥 reactive는 버리고 ref로만 모든 반응형을 선언해도 기능상에 문제는 없나요?